javascript - D3 Hive 图突出显示节点及其链接

Question

我一直在玩 here 的 mbostock 的 D3 hive 图，我想将其升级为具有与 this example 类似的功能。也就是说，当我将鼠标悬停在一个节点上时，它的所有链接都应该突出显示，以及显示这些链接来自/去往何处的文本。

我可以毫无问题地突出显示各个节点和链接

svg.selectAll(".link")
    .data(lLinks)
.enter().append("path")
    .on("mouseover", function() {
        d3.select(this)
            .transition()
            .duration(150)
            .style("stroke-width", 3)
    })

但我无法弄清楚如何突出显示属于特定节点的所有链接。

我当前的数据结构实际上与 mbostock's 相同，我认为这不适合我想做的事情。

我应该如何升级此代码以突出显示所有链接并显示其源/目的地？

Answer 1

这是一个工作 fiddle :http://jsfiddle.net/boatrokr/rk2s5/

下面是节点选择的代码。正如您所看到的，我所做的就是选择链接，如果链接源或目标与所选节点匹配，则链接的描边宽度将设置为 5。我不确定这是否是最好的方法，但它有效。 - 编辑:我忘记删除其中的 console.log - 开发需要它:)

svg.selectAll(".node")
    .data(nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + degrees(angle(d.x)) + ")"; })
    .attr("cx", function(d) { return radius(d.y); })
    .attr("r", 5)
    .style("fill", function(d) { return color(d.x); })
    .on("mouseover", function(d) {
        d3.select(this)
            .transition()
            .duration(150)
            .style("stroke-width", 3)
        d3.selectAll(".link")
            .data(links)
            .style("stroke-width", function (dl) {
                if(dl.source == d){
                    console.log(dl);
                    return 5;
                }else if(dl.target == d){
                    return 5;
                }
        });
    })
    .on("mouseout", function(){
        d3.select(this)
            .style("stroke-width", 1.5)
        d3.selectAll(".link")
            .style("stroke-width", 1.5)
    });