Question

我有以下数据：

var dataset = [[[1, 2], [1, 4]], [[5, 6], [9, 11]], [[5, 2], [15, 20]]];

和另一小部分颜色：

var color = ['#1f78b4', '#a6cee3', '#33a02c', '#b2df8a', '#b15928', '#ffff99',
            '#6a3d9a', '#cab2d6', '#ff7f00', '#fdbf6f', '#e31a1c', '#fb9a99'];

我想在D3中构建一个点图，但对于每个数据集[i]，这些点应该有不同的颜色。在计算了比例并绘制了轴之后，我到了最后一部分来绘制图表的点，这就是我的意思：

for (var n = 0; n < dataset.length; n++) {
    svg.selectAll("circle")
    .data(dataset[n])
    .enter()
    .append("circle")
    .attr("id", n)
    .attr("fill", color[n])
    .attr("cx", function (d) {
        return xScale(d[1]);
    })
    .attr("cy", function (d) {
        return yScale(d[0]);
    })
    .attr("r", rad);
}

基本上我想要的是＆＃34;数据集＆＃34;中的每个数据集合，具有不同颜色的点（例如[[1,2]，[1,4]]具有＃ 1f78b4颜色，[[5,6]，[9,11]]具有下一个颜色..等等）。但是当我运行代码时，它只从“数据集”中抽取第一个集合，忽略其他两个...... 有人遇到过这样的问题吗？怎么解决？

Answer 1

正如我在评论中所说：

虽然显式循环在这里工作，但嵌套选择更多合适的。

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var dataset = [
      [
        [1, 2],
        [1, 4]
      ],
      [
        [5, 6],
        [9, 11]
      ],
      [
        [5, 2],
        [15, 20]
      ]
    ];

    var color = ['#1f78b4', '#a6cee3', '#33a02c', '#b2df8a', '#b15928', '#ffff99',
      '#6a3d9a', '#cab2d6', '#ff7f00', '#fdbf6f', '#e31a1c', '#fb9a99'
    ];

    var svg = d3.select('body')
      .append('svg')
      .attr('width', 300)
      .attr('height', 300);

    // set up some scales
    var x = d3.scale.linear().range([0, 300]).domain([0, 22]);
    var y = d3.scale.linear().range([0, 300]).domain([0, 22]);
    
    var g = svg.selectAll(".collection") //<-- group per outer array
      .data(dataset)
      .enter()
      .append("g")
      .attr("class", "collection");
      
    g.selectAll("point") //<-- here the nest
      .data(function(d){
        return d; //<-- this is your array of points
      })
      .enter()
      .append("circle")
      .attr("class", "point")
      .attr("cx", function(d){
        return x(d[0]);
      })
      .attr("cy", function(d){
        return y(d[1]);
      })
      .attr("r", 5)
      .style("fill", function(d,i,j){
        return color[j]; //<-- j in index of the group
      })
    
  </script>
</body>

</html>

从对象数组中绘制D3图表

1 个答案: