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

这是一个工作小提琴：http://jsfiddle.net/boatrokr/rk2s5/

以下是节点选择的代码。如您所见，我所做的只是选择链接，如果链接源或目标与所选节点匹配，则链接的笔触宽度设置为5.我不确定这是否是最佳方法它，但它的工作原理。 - 编辑：我忘了在那里删除console.log - 需要它为dev：）

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)
    });

D3 Hive图突出显示Node及其链接

1 个答案: