Question

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

然后我使用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创建的特定“项”的函数并更改其一个或多个属性？）

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的数据绑定进行匹配。这依赖于具有匹配函数，该函数告诉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或类才能识别它们。 / p>

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

1 个答案: