Javascript d3.js如何针对和更改元素'；属性

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

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

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

并在画布上画出我的对象作为圆圈

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（）是一个方法/原型函数，用于请求用户输入，并通过更改以前创建的一些圆的属性来响应用户输入

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

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

我尝试创建一个全局数组，使用draw函数的参数作为索引，并将其作为变量而不是tempDrawVar。绘图功能正常，但数组保持为空

var circleArray = new Array();

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

---

谁能给我指出正确的方向吗？（简而言之：我如何创建一个函数，以使用d3.js创建的特定“项”为目标，并更改其一个或多个属性？

有几个选项可用于识别特定元素。您可以使用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的数据绑定来进行匹配。这依赖于有一个匹配函数，告诉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（）

---

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

不完全确定您要问什么，但

此

指的是处理程序中单击的DOM元素。这就是你想要的吗？额外的问题：为什么阵列技巧不起作用？我的逻辑有缺陷吗？一开始是个愚蠢的主意？拉尔斯·科托夫：对不起，这不是我想要的。我没有单击要更改的元素。在本例中，假设画布下方有一个红色的“do stuff”按钮，该按钮应该会改变，比如说一个特定圆的半径。如何识别该特定圆？这正是我的问题。我如何识别它？我知道我想更改表示对象“foo”的圆。但是，当使用d3.js绘制它时，它不一定是DOM中的foo表示。这就是我所说的“我该如何瞄准它”的意思。非常感谢你的回答。我没有注意到我可以通过在函数中添加.attr（“id”，objectHandle.name）来为我创建的元素设置属性“id”。我没有绑定任何数据也是正确的。我对JavaScript（到目前为止主要使用PHP）非常陌生，正在寻找一个轻量级的库，我可以用它来绘制东西，一位朋友建议我查看d3.js。你可能会发现d3网站上的教程很有帮助。