从对象数组数组绘制 D3 图表

Drawing D3 chart from array of arrays of objects

本文关键字：数组 图表 D3 绘制 对象      更新时间：2023-09-26

我有以下数据：

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

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

正如我在评论中所说：

虽然显式循环在这里有效，但嵌套选择更多 适当。

<!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>

相关文章：