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：数组）或
一个解析为对象的函数，用于您拥有的第二层嵌套（也在此处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行。看起来像您想要的-希望对您有所帮助...

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

2 个答案:

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

2 个答案:

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