d3js在标签上悬停时突出显示森伯斯特路径

我是d3.js的新手，我设法将以下jsfiddle组合在一起（来自不同例子）。d3js在标签上悬停时突出显示森伯斯特路径

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

我想添加这样的功能，即当您悬停（或单击）图例标签时，其行为与我在该元素上的行为完全相同（突出显示路径）。

我怀疑我需要在下面的代码部分增加了“.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，因为它没有没有正确显示图例

来源

2016-03-04 Sergio Negri

由联想你的意思是拿出悬停在顶部或序列的形状？ – thatOneGuy

传说中，按照任何图形，我的意思是清晰的彩色标签列表，它清楚地表明图形上的彩色元素。因此，在这种情况下，传奇是您在右侧的项目和业务单位列表，而不是在悬停时出现的东西（通常称为面包屑） –

ok，在这种情况下，您的小提琴没有传说 – thatOneGuy

使得从根父层次结构中取得所有节点的功能相同。

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

来源

2016-03-04 14:28:29 Cyril

对不起，Cyril，原来的jsfiddle没有显示这个传说，所以我原来的问题没有道理。现在确实如此。 –

看看现在更新我的答案:) – Cyril

如果我有多个相同的序列与不同的数据会怎么样？我已经试过你的代码，但它只需要一个。我需要添加什么以便悬停在标签上将突出显示所有多个相同的序列？ –

d3js在标签上悬停时突出显示森伯斯特路径

回答

相关问题