d3.js 大量节点的不同颜色

【问题标题】：d3.js different color for tons of nodesd3.js 大量节点的不同颜色
【发布时间】：2015-10-04 15:32:39
【问题描述】：

我想在 svg 上显示节点。每个节点都应该通过颜色或形状来区分。

虽然我的眼睛无法区分随机生成器生成的颜色。所以我只定义了 20 种颜色。

20 种颜色 * 3 种形状 = 60 个节点

.. .selectAll('圆圈') .append('circle') // .append('rect') // .append('another shape')

我应该为每个形状切片数据吗？如果数据长度是可变的，如何编码？ data[0~n] 的每个形状的代码都很长而且很乱。

【问题讨论】：

标签： d3.js svg

【解决方案1】：

您可以使用函数 d3.svg.symbol() 和颜色函数 - 查看 this plnkr 的工作演示。 This question 解释了有关动态创建符号的更多信息 - 提供 color(d.y) 所在位置的密钥，它将为该类型的符号创建相同的颜色。

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

【讨论】：

这对我真的很有帮助:)