NVD3 javascript:为散点图中的点添加颜色
NVD3 javascript: add colors to points in a scatter plot
我正试图用一些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步。
感谢
我刚刚遇到了同样的问题,并找到了一个适合我的用例的解决方法-YMMV。
基本上,我(从NVD3的源代码中)的理解是,您实际上只能为系列设置颜色,而不能为单个点设置颜色:因此,我可以像您在示例中那样向values对象添加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>';
});
要为散点图中的气泡添加颜色属性,我们可以在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
您可以使用"填充"属性添加颜色,其中圆绘制为
//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)});
- 全日历根据外部事件添加颜色
- D3 - 如何向路径对象添加颜色
- 使用颜色矩阵添加颜色色调效果
- 如何根据 d3.js 中的特定值为沃罗诺伊图添加颜色
- 在HTML中显示未格式化的文本并添加颜色
- 通过其 id 为表中的特定单元格添加颜色
- js点击添加颜色
- 向可拖动对象添加颜色
- 加载三个JS对象,给对象添加颜色
- TinyMCE版本3.X -如何在工具栏中添加颜色高亮
- 添加颜色的标题,因为它向下滚动页面在Wordpress创世纪框架
- 为googlemap添加颜色框功能
- 如何在three.js中为ShaderMaterial添加颜色?
- 剑道网格:如何添加颜色选择器
- 从颜色数组中向文本添加颜色
- 如何动态地在单击事件上添加颜色
- 在FullCalendar的月份视图中为日期范围添加颜色
- NVD3 javascript:为散点图中的点添加颜色
- 为添加的文本动态添加颜色
- 在设计脚本中:如何给对话框添加颜色