Question

我试图自定义[here] [1]提供的nvd3散点图：

该示例有4组不同的4种颜色。我有一个连续测量，每个观察的比例（0到1之间），我想应用于组颜色来改变阴影。接近0的值将是白色填充（将组的颜色作为边框），而值1将是示例中已使用的纯色。因此，例如，图中的组3将具有深色，中等和浅红色等阴影，而组2将具有不同的绿色阴影，组2具有不同的橙色阴影，组1具有不同的蓝色阴影（对于所有4组，值0为白色。）

我知道您可以使用颜色功能指定颜色，但似乎无法根据组指定渐变。任何建议都会非常感激。谢谢！代码示例粘贴在下面。

format = d3.format(",.2f");

//Format A
nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(true)
                .showDistY(true)
                //.height(500)
                .color(d3.scale.category10().range());

  //Configure how the tooltip looks.
//  chart.tooltipContent(function(key) {
//      return '<h3>' + key + '</h3>';
//  });
  chart.tooltipContent(function(key, x, y, e, graph) {
     var d = e.series.values[e.pointIndex];
     return '<h3>' + e.series.key + '</h3><p>Size: ' + format(d.size) + '<br>Shape: ' + d.shape + '</p>';
  });

  chart.xAxis.tickFormat(d3.format('.02f'))
  chart.yAxis.tickFormat(d3.format('.02f'))

  var myData = randomData(4,40);
  d3.select('#test1 svg')
      .datum(myData)
      .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});


function randomData(groups, points) { //# groups,# points per group
  var data = [],
      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
      random = d3.random.normal();

  for (i = 0; i < groups; i++) {
    data.push({
      key: 'Group ' + i,
      values: []
    });

    for (j = 0; j < points; j++) {
      data[i].values.push({
        x: random(),
        y: random(),
        size: Math.random(),
        proportion: Math.random(),
        shape: shapes[j % 6]
      });
    }
  }

  return data;
}

NVD3 javascript：在每个组的散点图中应用颜色渐变

0 个答案: