NVD3 JavaScript：为散点图中的点添加颜色

Question

我正在尝试从具有x，y和z值的一些数据中制作散点图。

我的代码与NVD3网站上的示例相同， http://nvd3.org/ghpages/scatter.html， 除此之外，我还计算了一个z值。 假设z = x + y。 我想通过在两种颜色之间进行插值来设置颜色，而不是更改半径值。

所有点都显示在图表上，但我无法为单个点设置颜色，只能为系列设置颜色。 为了简单起见，我首先尝试将点设置为静态颜色，如下所示：

[{"key":"X Plus Y","values":[{"x":0,"y":0,"z":0,"color":"#ff0000"}, ...]

但是这并不起作用，所以我想我需要在JavaScript中实现。我查看了scatterChart.js，但没有找到简单的方法。但我绝不是JavaScript专家，所以我可能轻易地错过了什么。

有关如何做到这一点的任何建议？我需要学习如何创建一个新的模型文件吗？

我还想在工具提示中显示z值，但那将是第二步。

谢谢

- Scott

Answer 1

我刚遇到了同样的问题，并找到了适合我的用例的解决方法-可能不适用于所有情况。

基本上，我的理解（来自NVD3的源代码）是您确实只能为系列设置颜色，而不能为单个点设置颜色：因此，无论如何我都会向值对象中添加一个color：'#rrggbb'项，就像您在示例中所做的一样（仅因为这样更容易构建数据结构），然后从中设置每个系列的颜色值（我正在使用underscore.js，但您应该能够在纯JavaScript中执行此操作）。

final_groups = _.map(groups, function(values, group_id) {
    return { key: group_id, color: values[0].color, values: values };
});

如果你需要使用颜色连续体而不是逐点设置颜色或使用离散比例，我可以使用mbostock的建议，让D3为我生成颜色值：

function compute_color_on_linear_scale(data, value, colorProperty, colorRange) {
    // get a list of all the groups (this works if the colorProperty,
    // aka z in your case, is numeric, otherwise the sort function
    // needs to be adjusted accordingly)
    // In your case, you could just write item.z rather than item[colorProperty]
    // if your function doesn't need to be generic, and in that case you can
    // omit the colorProperty argument from the argument list altogether
    categories = _.uniq(_.map(data, function(item) {
        return item[colorProperty];
    }).sort(function(a,b){return a - b}), true);

    // if no color range was provided, set a default one
    if(typeof colorRange === 'undefined') { colorRange = ['red', 'green']; }

    // this is mbostock's magic enchantment from his reply linked above
    var color = d3.scale.ordinal()
      .domain(categories)
      .range(d3.range(categories.length).map(d3.scale.linear()
      .domain([0, categories.length - 1])
      .range(colorRange)
      .interpolate(d3.interpolateLab)));

    return color(value);
}

这应该能解决问题。我的最后一步是隐藏图例，因为在这种情况下并没有太多意义。

至于在工具提示中显示z值，您需要覆盖scatterChart（）的默认tooltipContent（）函数，例如：

var chart = nv.models.scatterChart()
  .showDistX(true)
  .showDistY(true)
  .tooltipContent(function(key, x, y, obj) {
      return '<h3>' + obj.point.label + ' (' + key + ')</h3>';
  });

您可以根据需要自定义此内容 - 如果您只在函数开头添加console.log(arguments);，则可以在浏览器的开发人员工具中检查可用于在工具提示中使用的数据：

[...]
.tooltipContent(function(key, x, y, obj) {
    console.log(arguments);
    return '<h3>' + obj.point.label + ' (' + key + ')</h3>';
});

- hotzeplotz

Answer 2

为散点图中的气泡添加颜色属性，我们可以像在nv.models.scatter中添加getSize访问器一样添加getColor访问器。

 , getSize      = function(d) { return d.size || 1} // accessor to get the point size
 , getColor     = function(d) { 
                var colors = ["red", "orange", "yellow", "green", "blue"];
                return colors[d.color] || 'red'} // accessor to get the point color

您可以通过在绘制圆形时使用“fill”属性来添加颜色。

//Info:May be on Mousehover??
points.enter().append('circle')
    .attr('cx', function(d,i) { return x0(getX(d,i)) })
    .attr('cy', function(d,i) { return y0(getY(d,i)) })
    .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) })
    .attr('fill', function(d,i) { return getColor(d,i)});

- Naga Kiran