d3js选择具有特定文本标签的圆圈

时间:2014-07-18 20:53:36

标签: javascript d3.js

我想选择具有特定文字标签的所有圈子并添加新样式:.style("fill", "red")和onclick方法:.on("click", function(d) { zoom(d); });如何做到这一点?

以下是生成圈子和标签的代码:

var circle = svg.selectAll("circle")
              .data(nodes)
              .enter().append("circle")
              .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
              .style("fill", function(d) { return d.children ? color(d.depth) : null; })
              .on("click", function(d) { if (focus !== d && d.name.charAt(0) != 'z') zoom(d), d3.event.stopPropagation(); else if( d.name.charAt(0) === 'z' ) selectSound(d); });  


          var text = svg.selectAll("text")
              .data(nodes)
              .enter().append("text")
              .attr("class", "label")
              .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
              .style("display", function(d) { return d.parent === root ? null : "none"; })
              .text(function(d) { return d.name });

1 个答案:

答案 0 :(得分:1)

创建圆圈和文本后(通过运行上面包含的代码):

circle
  .filter(function(d) {
    return d.name == "the-name-of-the-circles-you-want-to-affect";
  })
  .style("fill", "red")
  .on("click", function(d) { zoom(d); });

了解如何获得circles选项的子集。

但是,请注意设置新的“点击”按钮。已过滤节点上的处理程序将覆盖您最初在这些圆上设置的原始单击事件处理程序。也许那不是问题;取决于您的应用程序中的所有内容等。