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值，但是这将是第2步

感谢

Answer 1

我刚才遇到同样的问题，并发现适合我使用的解决方法案例 - YMMV。基本上，我的理解（来自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's advice from this answer来让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>'; 
}); 

Answer 2

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

, 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 

您可以使用“填充”属性，其中圆圈涂加颜色

//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)});