Question

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

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

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

.. .selectAll（＆＃39;圈＆＃39;） .append（＆＃39; circle＆＃39;）//。append（＆＃39; rect＆＃39;）//。append（＆＃39;其他形状＆＃39;）

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

Answer 1

您可以使用函数d3.svg.symbol（）和颜色函数 - 查看this plnkr进行工作演示。 This question解释了有关动态创建符号的更多信息 - 在颜色（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);
                        })

d3.js用于吨节点的不同颜色

1 个答案: