Question

我想做的事情相对简单，但我是JS和D3.js的新手。我使用SVG到D3.js创建了一堆矩形。

我添加了一些代码来处理click事件，在那里我想迭代所有绘制的节点并对它们做一些事情，只要特定的属性匹配被点击的属性中的相同属性。

这是绘制矩形的代码（这里只有一个）;

d3.select("svg")
.append("rect").attr("x", 50)
.attr("y", 10)
.attr("height", 20)
.attr("width", 200)
.attr("title", "catalog")
.style("fill", "#CB4B19")
.on("click", mouseClick)

以下是我试图检索绘制的每个矩形的“title”属性并将其与单击的矩形进行比较（在这种情况下，只需将其记录在控制台中）。我知道这可能是基本的，但我无法弄清楚我在这里做错了什么。

function mouseClick(d) {

  var t = d3.select(this).attr("title");     //store the "title" property  of the clicked rectangle

  d3.selectAll("rect").each(function(d, i){  //Select all rectangles drawn
  if(d3.select(this).attr("title") == t){    //for each one, if the "title" property = the one initially chosen
   console.log(t);                          //do something here
  }
})
}

Answer 1

您的代码实际上似乎正常运行。至少对我而言确实如此。我要说的一件事是，d3模仿jQuery语法，因为它允许您选择具有d3.select('element[attributeName="?"]')语法属性的元素。您可以阅读有关selections here的更多信息。

因此，对于您的示例，您可以执行

var t = d3.select(this).attr("title"); 

// select all rectangles with the attribute title
d3.selectAll("rect[title='" + t + "']").each(function(d, i){
   console.log(t);                          
});

您不再需要if语句来检查，因为您只是选择它们。我做了一个简单的jsFiddle来展示这个。我制作了3种不同类型的具有不同title属性的矩形，当您点击它们时，它只会选择具有相同rect属性的title。

http://jsfiddle.net/augburto/znqe8nqr/

用D3.js迭代SVG元素

1 个答案: