javascript - D3 - 为数据集中的每个条目创建多个圆圈元素

Question

我有以下数据集:

    "data":[
            ["1951","306","27","159","34","82","4"],
            ["1956","426","41","203","47","119","16"],
            ["1959","562","67","267","48","148","32"],
            ["1960","605","76","282","54","157","36"],
            ["1961","665","88","310","57","168","42"],
            ["1962","749","116","340","60","189","44"],
            ["1963","847","140","375","63","215","54"],
            ...

每个数组中的第一个条目是年份。我创建了 2 个坐标轴。这个数据。现在，我想为每个条目创建 6 个圆形元素。如何使用以下行的变体来执行此操作:

var circles = svg.selectAll("circle")
                .data(data.data)
                .enter()
                .append("circle");

var circleAttr = circles. //Attributes defined here

Answer 1

您可以连续使用 .selectAll(...).data(...).enter(...).append(...) 模式两次，传递一个第二次(及以后)将函数设置为 .data，您接受上一级别的数据并返回该级别的数据项数组。

这是一个使用您的数据的小示例:

var colors = d3.scale.category10().domain([1951, 1963]);

var data = [
  ["1951", "306", "27", "159", "34", "82", "4"],
  ["1956", "426", "41", "203", "47", "119", "16"],
  ["1959", "562", "67", "267", "48", "148", "32"],
  ["1960", "605", "76", "282", "54", "157", "36"],
  ["1961", "665", "88", "310", "57", "168", "42"],
  ["1962", "749", "116", "340", "60", "189", "44"],
  ["1963", "847", "140", "375", "63", "215", "54"]
];

d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 1000)
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .selectAll("circle")
  .data(function(d) {
    var year = +d[0];
    return d.slice(1).map(function(value) {
      return {
        year: year,
        value: +value
      };
    });
  })
  .enter()
  .append("circle")
  .attr("r", 2)
  .attr("cx", function(d) {
    return d.value;
  })
  .attr("cy", function(d) {
    return d.value;
  })
  .attr("fill", function(d) {
    return colors(d.year);
  });

演示:https://jsfiddle.net/Dogbert/vvera4w9/