[英]d3.js different color for tons of nodes
I would like to display nodes on svg. 我想在svg上显示节点。 each node should be discriminated by color or shape.
每个节点应通过颜色或形状加以区分。
I though that color made by random generator cannot be discriminated for my eyes. 尽管我无法分辨随机发生器产生的那种颜色。 so I define maxium only 20 colors.
所以我只定义了最多20种颜色
20 colors * 3 shape = 60 nodes 20种颜色* 3个形状= 60个节点
.. .selectAll('circles') .append('circle') // .append('rect') // .append('another shape') .. .selectAll('circles').append('circle')// .append('rect')// .append('另一个形状')
should i slice data for each shape? 我应该为每种形状切片数据吗? if data length is variable, how to code that?
如果数据长度可变,该如何编码? each shape for data[0~n] made sooo long code and messy.
data [0〜n]的每个形状都使代码冗长且混乱。
You can use function d3.svg.symbol() and color function - look at this plnkr for working demo. 您可以使用函数d3.svg.symbol()和颜色函数-查看此plnkr以获取有效的演示。 This question explains more about creating symbols dynamically - provide your key in where color(dy) is and it will create same color for that type of symbol.
该问题说明了有关动态创建符号的更多信息-在color(dy)所在的位置提供密钥,它将为该类型的符号创建相同的颜色。
var series = vis.selectAll("g.series")
.data(data, function(d, i) { return d.id; })
.enter()
.append("svg:g")
.classed("series", true);
series.selectAll("g.point")
.data(function(d, i) { return d.pts })
.enter()
.append("svg:path")
.attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", function(d,i, j) { return d3.svg.symbol().type(d3.svg.symbolTypes[j])(); })
.style("fill", function(d) {
return color(d.y);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.