javascript - 如何在此递归 Javascript 中将此 D3.js 元素发送到另一个元素的点击函数

Question

我正在试验和修改 this基于 JSON 树结构绘制树的 d3.js 示例。这就是树的开始部分:

我正在尝试对其进行修改，以便单击文本将相关圆圈的颜色更改为红色。

但事实证明这是相当困难的，因为它是一个递归函数。在下面的代码片段中，我添加了一个函数 myFunction 来更改圆圈的颜色，我从文本的 on-click 函数中调用它。我正在经过我刚刚创建的圈子。

function myFunction(d, myCircle) {
  myCircle.style("fill", "red");
}



var myCircle = nodeEnter.append("circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-6)
  .on("click", myFunction(d, myCircle));

当我进行此更改并单击文本“图表”时，看看会发生什么。该节点的所有兄弟节点都变成红色:

这是 plunker of this broken code .你可以自己试试。

这是因为递归。所有 sibling 圈子的对象都被发送到 myFunction()。那不是我需要的。但我不知道如何使它正常工作。请帮助我解释如何实现此功能。

Answer 1

不，它不是递归。当您这样做时:

function myFunction(d, myCircle) {
  myCircle.style("fill", "red");
}

这里的 myCircle 是所有的圆选择，所以当你点击所有打开的节点时都会变成红色。

你应该这样处理这个问题:

function myFunction(d) {
  //get all the circles
  d3.selectAll("circle")[0].forEach(function(e){
    //get the data associated with the circle
    var d1 = d3.select(e).data()[0];
    if (d1.name == d.name){//check if the data's name and one passed is same
      d3.select(e).style("fill", "red");//change color fr only that node.    
    }
  })

}

工作代码here

另一种方式

不需要你制作的myFunction，直接在click函数中执行以下操作即可。

  .on("click", function(d) {
          d3.select(this.parentNode).select("circle").style("fill", "red")
        });

工作代码here