基本 D3.js:如何在函数中使用联接

Basic D3.js: how to use joins within a function?

本文关键字：函数 js D3 基本      更新时间：2023-09-26

我正在掌握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()。

您需要

为两组数据指定不同的类名。 现在两者都被标记为相同的类（".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");

我只使用 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);
}
相关文章：