D3.js D3力定向单击节点并更改其相邻颜色
我正在研究D3JS的力定向图。我想要的是在单击节点的邻居时更改节点的颜色。但我只能更改单击节点的相邻链接(边)的颜色。连接的节点是可获取的,但我不知道如何更改其颜色 这是密码D3.js D3力定向单击节点并更改其相邻颜色,d3.js,click,D3.js,Click,我正在研究D3JS的力定向图。我想要的是在单击节点的邻居时更改节点的颜色。但我只能更改单击节点的相邻链接(边)的颜色。连接的节点是可获取的,但我不知道如何更改其颜色 这是密码 function addTheD3Map(labelname, jsonpath){ var width = 800, height = 610; width = window.screen.width*0.72; var color = d3.scale.category2
function addTheD3Map(labelname, jsonpath){
var width = 800,
height = 610;
width = window.screen.width*0.72;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(60)
.size([width, height])
var svg = d3.select(labelname).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(d3.behavior.zoom().scaleExtent([0.5, 8]).on("zoom", zoom))
.append("g")
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.attr("fill", "#123456");
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.json(jsonpath, function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return d.value;/*return Math.sqrt(d.value);*/ })
.on("click", function(d) {showEdgeInfo(d)});
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag)
.on("click", function(d) {
var selectednodename = d.name;
svg.selectAll(".node").style("fill", function(d) { return color(d.group); });
svg.selectAll(".link").style("stroke", function(d) { if(d.target.name==selectednodename||d.source.name==selectednodename){ return "black";} else{return "grey";} });
d3.select(this).style("fill", "black");
showNodeInfo(d)});
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
}
最相关的代码如下所示:
.on("click", function(d) {
var selectednodename = d.name;
svg.selectAll(".node").style("fill", function(d) { return color(d.group); });
svg.selectAll(".link").style("stroke", function(d) { if(d.target.name==selectednodename||d.source.name==selectednodename){
return "black";}
else{return "grey";} });
d3.select(this).style("fill", "black");
1.重新绘制节点以恢复其颜色
2.如果边连接到选定节点,则将其设置为黑色,否则为灰色
3.将选定节点绘制为黑色
我想在步骤2中使边的另一个节点变成黑色(或一些不同的颜色)。我该怎么做呢?@larskothoff这很有用,谢谢!