如何在D3强制布局中增加链接的长度 [英] How to increase the length of a link in D3 force layout
问题描述
如何增加力图的链接长度.我的代码写在下面.我应该改变什么?
How can I increase the link length of a force graph. My code is written below. What should i change?
我还要在鼠标悬停时标记唯一的子节点"，并且父节点具有其标签.
Also I want to label the "only child nodes" on mouse-over and the parent node has their label.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Force</title>
<style type="text/css">
circle.node {
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
}
line.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="../d3/d3.v3.min.js"></script>
<script type="text/javascript">
var w = 960,
h = 500,
node,
link,
root;
var force = d3.layout.force()
.on("tick", tick)
.size([w*2, h*2]);
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w*2)
.attr("height", h*2);
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / (180) * Math.PI]; });
d3.json("try.json", function(json) {
root = json;
update();
});
function update() {
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
root.fixed=true;
root.x=900;
root.y=500;
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = vis.selectAll("line.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x+100; })
.attr("y1", function(d) { return d.source.y+100; })
.attr("x2", function(d) { return d.target.x+100; })
.attr("y2", function(d) { return d.target.y+100; });
// Exit any old links.
link.exit().remove();
// Update the nodes…
node = vis.selectAll("circle.node")
.data(nodes, function(d) { return d.id; })
.style("fill", color);
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return Math.sqrt(d.size) / 10 || 25; })
.style("fill", color)
.on("click", click)
.call(force.drag);
// Exit any old nodes.
node.exit().remove();
}
function tick() {
link.attr("x1", function(d) { return d.source.x-100; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x-100; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x-100; })
.attr("cy", function(d) { return d.y; });
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
</script>
</body>
</html>
推荐答案
For the link distance, you can use link.distance.
文档当前关于此功能的内容如下:
Here is what the doc currently says about this function:
如果指定了距离，则将距离访问器设置为指定的数字或功能，重新评估每个链接的距离访问器，然后返回该力.如果未指定distance，则返回当前的距离访问器，默认为:
If distance is specified, sets the distance accessor to the specified number or function, re-evaluates the distance accessor for each link, and returns this force. If distance is not specified, returns the current distance accessor, which defaults to:
function distance() {
return 30;
}
为每个链接调用距离访问器，并向其传递链接及其从零开始的索引.然后将结果编号存储在内部，以便仅在初始化力或以新的距离调用此方法时才重新计算每个链接的距离，而不是在每次施加力时都重新计算.
The distance accessor is invoked for each link, being passed the link and its zero-based index. The resulting number is then stored internally, such that the distance of each link is only recomputed when the force is initialized or when this method is called with a new distance, and not on every application of the force.
对于标签，请询问其他问题.
For the labels, please ask another question.
这篇关于如何在D3强制布局中增加链接的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
