javascript - d3.js 绑定(bind)数组中的数据数组

Question

这应该是一个多线图我有一个像这样的数组作为数据:

data = [[point:{x: 0, y: 1},point:{x: 0, y: 3}], [point:{x: 3, y: 1},point:{x: 3, y: 3}], [point:{x: 0, y: 6},point:{x: 1, y: 9}], [point:{x: 2, y: 6},point:{x: 3, y: 2}]]

代码:

   gr.line = d3.line()
        .x((d) => d.point.x)
        .y((d) => d.point.y)
    let allGroup = gr.g.selectAll(".pathGroup").data(data)
    allGroup.exit().remove()
    let g = allGroup.enter()
        .append("g")
        .attr("class", "pathGroup")


    g.append("path")
        .attr("class", "line")
        .attr("stroke", (d) => {
            return 'red'
        })
        .attr("d", (d) => gr.line(d))

我想在路径中添加圆圈。如果我想将圆圈附加到组中(在本例中为变量 g)，我会得到整个数组。但我只需要数组中的每个项目来附加圆圈。我想用数据绑定(bind)来做，因为我想在数据发生变化时删除这些项目。我用 forEach 循环完成了它，但我认为这不是一个好的解决方案。有人知道如何通过数据绑定(bind)完成它吗？

Answer 1

您的数据 无效。根据您的线生成器判断，您应该有一个对象数组，如下所示:

var data = [[{point:{x: 10, y: 10}}, {point:{x: 100, y: 30}}], 
    [{point:{x: 30, y: 100}},{point:{x: 230, y: 30}}]
];

回到问题:您是对的，执行任何类型的循环(如 forEach)以在 D3 代码中附加元素通常不是一个好主意。

只需在内部选择中使用外部选择的单个数据(它本身就是一个数组):

g.selectAll(null)
    .data(d=>d)
    .enter()
    .append("circle")
    //etc...

值得一提的是，我正在使用 selectAll(null)这里是因为进入/更新/退出选择似乎在外部选择中运行，而不是在内部选择中运行。如果那不正确，请相应地更改该行。

这是一个演示，我正在更改数据值以更好地查看路径和圆圈:

var data = [
  [{
    point: {
      x: 10,
      y: 10
    }
  }, {
    point: {
      x: 100,
      y: 30
    }
  }],
  [{
    point: {
      x: 30,
      y: 100
    }
  }, {
    point: {
      x: 230,
      y: 30
    }
  }]
];

var svg = d3.select("svg");

var line = d3.line()
  .x((d) => d.point.x)
  .y((d) => d.point.y);

var allGroup = svg.selectAll(".pathGroup").data(data);

var g = allGroup.enter()
  .append("g")
  .attr("class", "pathGroup")

g.append("path")
  .attr("class", "line")
  .attr("stroke", "red")
  .attr("stroke-width", "1px")
  .attr("d", line);

g.selectAll(null)
  .data(d => d)
  .enter()
  .append("circle")
  .attr("r", 4)
  .attr("fill", "teal")
  .attr("cx", d => d.point.x)
  .attr("cy", d => d.point.y);

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>