d3.js select 鼠标悬停时连接节点

Question

我试图在鼠标悬停时将所有连接节点的标签文本加粗。从评论中可以看出，尝试了各种程序，但仍然无法正常工作。我正在使用基于 http://bl.ocks.org/sjengle/5432087.

的圆图

我想要的是，当我将鼠标悬停在一个节点上时，我希望所有连接的节点都变成粗体。（我现在拥有的是所有连接的线都变粗了，但我也想让线末端的节点突出显示 - 粗体）

对应代码如下：

function mouseovered(d) {
    console.log("mouseOver");
    //d3.select(this).style("font-weight", 700);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return l.value > 0; })
        //.filter(function(l) { return console.log(l)})
        //.style("font-weight", 700);
        .style("stroke-width", "4px")
        .style("stroke-opacity", 1);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        .filter(function(l) { return l.value > 0; })
        //.filter(function(l) { return console.log(l)})
        //.style("font-weight", 700);
        //.style("stroke-width", "4px")
        .style("stroke-opacity", 0.1);

    linkList = d3.select("#plot").selectAll(".link")
        //.filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        //.filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return if (l.source.name === d.name){return l.target.name} else if(l.target.name === d.name){return l.source.name; })
        .filter(function(l) { return console.log("L.SOURCE:", l.source.name, "L.TARGET:", l.target.name); })
        .filter(function(l) { return l.source.name, l.target.name; });
        //console.log(linkList);

    console.log("link:", linkList)

    d3.select("#plot").selectAll(".nodeText")
        //.filter(function(l) { return d3.select("#plot").selectAll(".link").filter(function(k) {return k.source.name === d.name || k.target.name === d.name ; })})
        //.filter(function(l) { return d3.select("#plot").selectAll(".link").filter(function(k) {return k.value > 0 ; })})
        .filter(function(l) { return l.name === "OP PPR_07.1 Posílení výzkumu, technologického rozvoje a inovací"})
        .filter(function(l) { return l.name === linkList})
        .style("font-weight", 700);

}

这是我的数据格式：

{"nodes": [{"name": "OP PIK_01.1 Rozvoj výzkumu a vývoje pro inovace", "group": 1}, {"name": "OP PIK_01.2 Rozvoj podnikání a konkurenceschopnosti malých a středních podniků", "group": 1}, {"name": "OP PIK_01.3 Účinné nakládání energií, rozvoj energetické infrastruktury a obnovitelných zdrojů energie, podpora zavádění nových technologií v oblasti nakládání energií a druhotných surovin", "group": 1}, {"name": "OP PIK_01.4 Rozvoj vysokorychlostních přístupových sítí k internetu a informačních a komunikačních technologií", "group": 1}, {"name": "OP PIK_01.5 Technická pomoc", "group": 1}, ...

, {"name": "", "group": 2}, {"name": "", "group": 4}, {"name": "", "group": 6}, {"name": "", "group": 8}, {"name": "", "group": 10}, {"name": "", "group": 12}, {"name": "", "group": 14}, {"name": "", "group": 16}

], "links": [{"value": 0.13757455268389662, "target": 1, "source": 0}, {"value": 0.07236842105263158, "target": 2, "source": 0}, {"value": 0.03948896631823461, "target": 3, "source": 0}, {"value": 0.0, "target": 4, "source": 0}, {"value": 0.007836990595611285, "target": 5, "source": 0}, {"value": 0.009244992295839754, "target": 6, "source": 0}, {"value": 0.0005341167044999333, "target": 7, "source": 0}, {"value": 0.0, "target": 8, "source": 0}, {"value": 0.06844336765596608, "target": 9, "source": 0}, {"value": 0.0, "target": 10, "source": 0}, {"value": 0.0014781966001478197, "target": 11, "source": 0}, {"value": 0.0, "target": 12, "source": 0}, {"value": 0.0, "target": 13, "source": 0}, {"value": 0.0, "target": 14, "source": 0}, {"value": 0.0, "target": 15, "source": 0}, {"value": 0.0, "target": 16, "source": 0}, {"value": 0.0, "target": 17, "source": 0}, {"value": 0.0, "target": 18, "source": 0}, {"value": 0.004398826979472141, "target": 19, "source": 0}, {"value": 0.0018248175182481751, "target": 20, "source": 0}, {"value": 0.0, "target": 21, "source": 0}, {"value": 0.0022197558268590455, "target": 22, "source": 0}, {"value": 0.0, "target": 23, "source": 0}, ... ]}

Answer 1

使用原始的 Miserable 节点和链接，我发现以下代码可以工作。

function mouseover(d) {
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
        .filter(function(l) { return l.value > 0; })
        .classed("highlight", true);
    d3.select("#plot").selectAll(".link")
        .filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
        .filter(function(l) { return l.value > 0; })
        .classed("downlight", true);
    d3.select("#plot").selectAll(".node")
        .each(function(n) {
            for (let index = 0; index < graphData.links.length; index++) {
                const element = graphData.links[index];
                if ( (element.source.name === d.name && element.target.name === n.name) ||
                     (element.target.name === d.name && element.source.name === n.name)
                   ) {
                    d3.select(this).attr("r", 8);
                    return;
                }
            }
         });
}

function mouseout(d) {
    d3.select("#plot").selectAll(".link")
        .classed("highlight downlight", false);
    d3.select("#plot").selectAll(".node")
        .attr("r", 5)
        .classed("highlight", false);
}

// Draws nodes with tooltips
function drawNodes(nodes) {
    // used to assign nodes color by group
    var color = d3.scale.category20();

    d3.select("#plot").selectAll(".node")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("id", function(d, i) { return d.name; })
        .attr("cx", function(d, i) { return d.x; })
        .attr("cy", function(d, i) { return d.y; })
        .attr("r", 5)
        .style("fill",   function(d, i) { return color(d.group); })
        .on("mouseover", function(d, i) { addTooltip(d3.select(this)); mouseover(d); })
        .on("mouseout",  function(d, i) { d3.select("#tooltip").remove(); mouseout(); });
}

你也需要一点CSS

.node {
    stroke: #ffffff;
    stroke-width: 1px;
}

.node.highlight {
    stroke: #0000;
    stroke-width: 3px;
}

.link {
    fill: none;
    stroke: #888888;
    stroke-width: 1px;
    stroke-opacity: 0.5;
}

.link.highlight {
    stroke: red;
    stroke-opacity: 1.0;
}
.downlight {
    stroke-opacity: 0.1;
}

以及图形数据的保存

var graphData = null;

// Draws an arc diagram for the provided undirected graph
function drawGraph(graph) {
    graphData = graph; // save for later in mouseover

    ....
}

d3.js select 鼠标悬停时连接节点

d3.js select connected nodes on mouseover

javascript

data-visualization

selectall

nodes

d3.js