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

【问题标题】：Basic D3.js: how to use joins within a function?Basic D3.js：如何在函数中使用连接？
【发布时间】：2012-08-14 17:14:59
【问题描述】：

我开始掌握 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() 与函数调用一起使用。）

【问题讨论】：

标签： javascript d3.js

【解决方案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");

【讨论】：

【解决方案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);
}

【讨论】：