基本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);
}