我试图在鼠标悬停时使所有连接的节点的标签文本变为粗体。您可以从注释中看到各种尝试的程序，但是仍然无法正常工作。我正在使用基于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}, ... ]}
答案 0 :(得分：0)
使用原始的可悲节点和链接，我发现以下代码可以正常工作。
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
....
}