D3.js 在d3中的for循环中绘制多条线

如果只添加一次svg对象，那么在d3中有许多在线案例如何绘制几行，例如

   svg.selectAll("line")
   .data(dataset)
   .enter().append("line")
   .style("stroke", "black")  // colour the line
   .attr("x1", function(d) { console.log(d); return xScale(d.x1); })
   .attr("y1", function(d) { return yScale(d.y1); })
   .attr("x2", function(d) { return xScale(d.x2); })
   .attr("y2", function(d) { return yScale(d.y2); }); 

此绘图创建一条直线。我想在一个数组中创建许多不同的行，如smth

   var svg = d3.select("body")
   .append("svg")
   .attr("width", w)
   .attr("height", h);

   for (a_ind=1; a_ind<3; a_ind++){
   dataset_a=dataset.filter(function(d) { return (d.a==a_ind)})

   svg.selectAll("line")
   .data(dataset_a) - //!!! using new dataset in each cycle
   .enter().append("line")
   .style("stroke", "black")  // colour the line
   .attr("x1", function(d) { console.log(d); return xScale(d.x1); })
   .attr("y1", function(d) { return yScale(d.y1); })
   .attr("x2", function(d) { return xScale(d.x2); })
   .attr("y2", function(d) { return yScale(d.y2); }); 
   }

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
对于（a_ind=1；a_ind我会这样做。使每个数据集（每行1个数据集），
.enter（）.append（）
将正常工作。要在单击时删除该行，我添加了一个事件处理程序，它将选择刚刚单击的行并删除它

var data = [[dataset_a], [dataset_b], [dataset_c], [dataset_d], [dataset_e]];

var xValue = function(d){return d.x;}
var yValue = function(d){return d.y;}

var lineFunction = d3.line()
  .x(function(d) { return xScale(xValue(d)); })
  .y(function(d) { return yScale(yValue(d)); });

var lines = d3.select("svg").selectAll("path")

lines.data(data)
  .enter().append("path")
  .attr("d", lineFunction)
  .on("click", function(d){
    d3.select(this).remove();
  });

好吧，如果你想画线，我建议你附加…
s

D3ENTER选择非常简单：附加元素的数量是数据数组中与任何元素都不匹配的对象的数量

因此，您只需要一个包含多个对象的数据数组。例如，让我们创建50个对象：

var data = d3.range(50).map(function(d) {
  return {
    x1: Math.random() * 300,
    x2: Math.random() * 300,
    y1: Math.random() * 150,
    y2: Math.random() * 150,
  }
});

并且，在下面的演示中，我选择了
null
，它们都将在enter选择中。下面是演示：


var svg=d3.选择（“svg”）；
var数据=d3.范围（50）.映射（函数（d）{
返回{
x1:Math.random（）*300，
x2:Math.random（）*300，
y1:Math.random（）*150，
y2:Math.random（）*150，
}
});
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var lines=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d）{
返回d.x1
})
.attr（“x2”，函数（d）{
返回d.x2
})
.attr（“y1”，函数（d）{
返回d.y1
})
.attr（“y2”，功能（d）{
返回d.y2
})
.样式（“笔划”，功能（ui）{
返回颜色（一）
})
.style（“笔划宽度”，1）；

这是可能的，但是您的。基本上，您的数据必须以
[[objects line 1]、[objects line 2]、…]的形式存在
@Anna K和pmkro：我只是想澄清一下，这种结构对于绘制多条路径是必要的，而不是我在我的文章中提到的多条线。不用担心，可能会接受这样的结果。@pmkro回答得很好，总是很高兴看到d3世界的新成员。我希望你不介意，我已经编辑了它，将代码片段更改为纯代码block（因为代码片段通常用于工作代码演示）。@pmkro值得一提的是，您是在附加路径，而不是行。而且，在这种情况下，OP不需要包含内部数据数组的数组。@GerardoFurtado啊，是的。我通常只使用路径，忘记了行！