Question

我是d3.js的新手，我设法将（{来自不同的例子）放在一起jsfiddle。

这是典型的森伯斯特，我在传奇中有标签。

我希望添加当您在图例标签上悬停（或点击）时的功能，就像我在该元素上一样（突出显示路径）。

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

   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

创建一个函数来从根父层次结构flatten函数获取所有节点。

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")

工作示例here

d3js在悬停在标签上时突出显示旭日路径

1 个答案: