![](/img/trans.png)
[英]How to change the colors of all highlighted nodes in d3JS force directed graph?
[英]D3js force directed graph change strength of connections
我正在使用 D3js 创建一个力有向图。
如何更改连接的强度? 就我而言,我想降低连接的强度,以便节点之间的距离通常更远,并且整个图形变得更加松散且更可用。 (有关当前结果,请参见末尾的图像)。 更改 value 属性只会更改连接的显示厚度,而不是它们的“物理”强度。
JSON数据(超过12000行,所以我不想直接放在这个帖子里): https ://pastebin.com/Ha04adCQ
代码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
text {
font-family: sans-serif;
font-size: 10px;
}
</style>
<svg width="3000" height="1500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("pcap_export.json", function(error, graph) {
if (error) throw error;
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
var circles = node.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); });
// Create a drag handler and append it to the node object instead
var drag_handler = d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
drag_handler(node);
var lables = node.append("text")
.text(function(d) {
return d.id;
})
.attr('x', 6)
.attr('y', 3);
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
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("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</head>
<body>
</body>
</html>
当前结果:
对于 d3 forceSimulation 中属性的任何更改,您可以参考此 api https://github.com/d3/d3-force并更改以下力模拟的初始化。
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
据我了解,您想增加链接之间的距离。 为此,您可以使用距离属性并将其添加到模拟的初始化中,如下所示。 你可以参考上面的api来尝试链接、节点、中心和费用的各种属性。 将.distance([200]) 添加到您的链接中,看看这就是您想要的。
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}).distance([200]))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
此外,如果您不想要重叠节点,请在力模拟中添加碰撞属性,在 0 和 1 之间更改强度。您必须通读 api 中的各种属性并在初始化中添加它们,直到找到所需的结果
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}).distance([100]))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", d3.forceCollide().strength([0.3]));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.