D3JS 将鼠标悬停在标签上时突出显示旭日路径

Question

我是d3.js的新手，我设法（从不同的示例中）将以下jsfiddle放在一起。

这是一个典型的旭日，我在传说中有标签。

我想添加一项功能，当您将鼠标悬停（或单击）图例标签时，它的行为就像我在该元素上一样（突出显示路径）。

我怀疑我需要在以下代码部分添加" .on("mouseover", XXX)"，但我不清楚如何完成任务

   g.append("svg:rect")
      .attr("rx", li.r)
      .attr("ry", li.r)
      .attr("width", li.w)
      .attr("height", li.h)
      .style("fill", function(d) { return d.value; });

谢谢！

作为一个 jsfiddle，非常感谢该 jsfiddle 上的一个叉子，其中包含答案（当然除了这里的后代答案）;)

编辑：我将链接更改为jsfiddle，因为它没有正确显示图例

Answer 1

创建一个函数来获取根父层次结构中的所有节点 平展函数也这样做。

function flatten(root) {
  var nodes = [],
    i = 0;
  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }
  recurse(root);
  return nodes;
}

在图例的鼠标悬停上：

.on("mouseover", function(d){
      var nodes = flatten(myData);//get all nodes
      //find the node on which it is over
      var n = nodes.find(function(d1){ return (d1.name == d.key)});
      mouseover(n);//call the mouse over function
    }).on("mouseleave", mouseleave);

接下来的文本使它们"pointer-events", "none"，以便它们不会在图例悬停时触发鼠标离开事件。

  g.append("svg:text")
    .attr("x", li.w / 2)
    .attr("y", li.h / 2)
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .style("pointer-events", "none")

工作示例在这里