javascript - Basic D3.js：如何在函数中使用连接？

Question

我开始掌握 D3.js。我想编写一个函数，用一组数据绘制一组点，然后用另一组数据绘制另一组点。

我已经写了这个，但是第二组点覆盖了第一组点！如果没有，我该如何重写它，selectAll以便我正确地得到两组点？

function drawDots(mydata) { 
  focus.selectAll(".dot").data(mydata)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
}
drawDots(data[0]);
drawDots(data[1]);

（注意：这是一个简化。基本上我想知道如何使用.enter()函数调用。）

Answer 1

你需要给两组数据不同的类名。现在两者都被标记为相同的类（“.dot”），但如果它们代表不同的集合，您还需要能够区分它们。例如：

function drawDots(mydata, name) { 
  focus.selectAll(".dot"+"."+name).data(mydata)
    .enter().append("circle")
    .attr("class", "dot" + " " + name)
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);
}
drawDots(data[0], "set1");
drawDots(data[1], "set2");

Answer 2

我只使用 d3js 来构建力图，但我认为在您的情况下，您需要先将节点添加到可视化中，然后调用 enter()，然后获取图中的内容。

function drawDots(mydata) 
{ 
  myD3Object.nodes(myData).start();
  focus.selectAll(".dot").data(myD3Object.nodes())
  .enter().append("circle")
  .attr("class", "dot")
  .attr("cx", line.x())
  .attr("cy", line.y())
  .attr("r", 3.5);
}