D3-如何在多线图上绘制点？ （遍历数组）

Question

我有一个多折线图，我想在上面画点（最终添加我的工具提示。）我似乎无法正确地遍历数据并将它们全部绘制出来。我的数据是一个数组数组，每个子数组都是它自己的线，我想在上面画点。 x(inspected_at), y(flow_data)

完整的代码在这里，大约第 388 行：https://codepen.io/lahesty/pen/aKQjVK?editors=0011

var dots = 
    svg.selectAll('.dots').data(data).enter().append("g").attr("class", 
    "dot");
dots.selectAll('.dot')
    .data(data)
    .enter()
    .append('circle')
    .attr("r", 2.5)
    .attr("cx", function(d) { return x(d.inspected_at); })
    .attr("cy", function(d) { return y(d.flow_data); })
    .style("fill", "blue").style("opacity", ".5") 

我认为它是类似的，因为当我将第二个 .data(data) 更改为 .data(data[0]) 时，第一个点数组会出现，但我希望它们都出现。我也试过这样的东西，而不是上面的：

svg.selectAll("g.dot")
    .data(data)
    .enter().append("g")
    .attr("class", "dot")
    .selectAll("circle")
    .data(function(d, i) { return d[i]; })
    .enter().append("circle")
    .attr("r", 6)
    .attr("cx", function(d,i) {  return x(d.inspected_at); })
    .attr("cy", function(d,i) { return y(d.flow_data); })

我使用 v4。有什么想法吗？非常感谢您的帮助！

Answer 1

你快完成了。输入g.dot 选择后，您必须保持相同的绑定才能将数据传播到圈子。这可以通过标识函数来完成，function(d) { return d; } 或 Object。

内部迭代将在Selection 内隐式完成。

svg.selectAll("g.dot")
   .data(data)
   .enter().append("g")
     .attr("class", "dot")
   .selectAll("circle")
   .data(Object) // <--- identity function here
   .enter().append("circle")
     .attr("r", 6)
     .attr("cx", function(d,i) {  return x(d.inspected_at); })
     .attr("cy", function(d,i) { return y(d.flow_data); })

Answer 2

我还要说你快到了 - 这是你可以继续前进的方法：data() 的第一个参数需要是

• 一个可迭代的对象 (vulgo: array) 或
• 一个函数解析为一个对象，用于您拥有的第二级嵌套（c 也在这里：selection.data）。

您可以（并且可能应该）提供关键功能。

因此，对data() 的外部调用变为

var dots = svg.selectAll('.dots').data(data, function(d, i) { return d[0]; }).enter() // and so on

内部调用利用外部的每一行（即data[0]、data[1]、 等）并选择内部集合。方便的是，这就是你得到的——但除非你使用一个函数，否则你永远无法告诉 D3 要做什么。因此，以下内容有点疯狂：

dots.selectAll('.dot')
    .data(function(d) { return d; }, function(d_, i_) { return i_})
    .enter() // and so on

但是你需要一个函数返回它自己的参数（和一个很好的衡量标准的密钥生成器）。我确实叉了你的笔 - c 在这里：https://codepen.io/sebredhh/pen/VdVOxQ?editors=0010 并更改了第 389 和 391 行。看起来像你在寻找的东西 - 希望对你有帮助...