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

我还想说你已经快完成了 - 以下是你可以继续前进的方法:data() 的第一个参数必须是

• 可迭代的对象(俗称:数组)或
• 解析为您拥有的第二级嵌套的对象的函数(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

但是您需要一个返回其自己的参数的函数(以及一个用于良好测量的 key 生成器)。我确实在这里 fork 了你的笔-c:https://codepen.io/sebredhh/pen/VdVOxQ?editors=0010并更改了第 389 行和第 391 行。看起来像您正在寻找的内容 - 希望您发现这有帮助...