javascript - d3.js 如何定位和更改元素的属性

Question

我正在创建一堆具有“name”、“type”、“status”、“poxitionX”和“positionY”属性的对象(使用伪类，因此它们都具有相同的结构)。

然后我使用 d3.js 激活我的 SVG 绘图区域

var svg = d3.select("#d3canvas")
.append("svg")
.attr("width", 600)
.attr("height", 400);

并在 Canvas 上将我的对象绘制为圆圈

function drawCircle (objectHandle) {
var tempDrawVar = svg.append("circle")
    .style("stroke", "white")
    .style("fill", "orange")
    .attr("r", 20)
    .attr("cx", objectHandle.positionX)
    .attr("cy", objectHandle.positionY)
    .on("click", function(d){
        objectHandle.doStuff();
        });
}

doStuff() 是一个方法/原型(prototype)函数，它应该要求用户输入并通过更改一些先前创建的圆圈的属性来对用户输入使用react。

问题是，我不知道如何“定位”这些圈子。我可以很好地更新对象中的属性，但我真的不认为完全删除 Canvas 区域并在每次“更新”时创建新的圆圈是一个不错的解决方案。

我不能在函数之外使用 tempDrawVar，即使我可以，每次绘制新圆时它也会被覆盖(或者是吗？我不确定，我承认)。

我尝试创建一个全局数组，使用绘制函数的参数作为索引，并将其用作变量而不是 tempDrawVar。绘图功能有效，但数组仍为空...

var circleArray = new Array();

function drawCircle (objectHandle) {
circleArray[objectHandle] = svg.append("circle")
...

有人能指出我正确的方向吗？ (简而言之:如何创建一个针对使用 d3.js 创建的特定“项目”的函数并更改其一个或多个属性？)

Answer 1

有一些选项可用于识别特定元素。您可以使用 DOM 选择器，这意味着您需要附加到元素的 ID 或类之类的内容来定位它。

d3.selectAll("circle").data(data).enter()
  .append("circle")
  .attr("id", function(d) { return d.id; })
  .attr("class", function(d) { return d.class; });

// select DOM element for first data element based on ID
d3.select("#" + data[0].id); 

// select by class
d3.select("circle." + data[0].class);

或者，您可以使用 D3 的数据绑定(bind)来进行匹配。这依赖于有一个匹配函数来告诉 D3 如何将数据与 DOM 元素匹配。

// second argument to .data() is the matching function
d3.selectAll("circle")
  .data(data, function(d) { return d.id; })
  .enter()
  .append("circle");

// select the DOM element for the first data element
d3.selectAll("circle")
  .data([data[0]], function(d) { return d.id; });

后者可能是更 D3 的方式，但需要更多代码(而且不是特别好的代码)来选择元素。您还必须记住始终将相同的匹配函数传递给 .data()。

在您发布的示例代码中，您似乎没有将任何数据绑定(bind)到创建的 DOM 元素，因此您必须分配一个 ID 或类才能识别它们。