如何增加D3力布局中链接的长度

如何增加力图的链接长度。我的代码写在下面。我应该改变什么？如何增加D3力布局中链接的长度

另外我想在鼠标悬停时标记“唯一的子节点”，父节点有它们的标签。

<!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>

来源

2013-06-19 coder

欢迎，有一个看看[如何提问]（http://stackoverflow.com/questions/how-to-ask）一节，以了解更多关于如何提问的问题。主要是在这里知道你已经尝试了什么并提供一个你现在拥有的东西（例如一个jsFiddle）的实例。另外，请不要问你的问题中的第二个不相关的问题，问另一个问题。本网站的目标是让其他用户在得到答案后找到现有的答案。 –

对于链接的距离，你可以使用force.linkDistance。

对于标签，请询问另一个问题。

来源

2013-06-19 06:31:00

感谢您的回复..它解决了我的问题。 – coder

然后，您可以点击打勾来接受答案。 –

在这里，您可以使用.distance来设置链接的噪音或长度。

var forceLink = d3 
    .forceLink().id(function (d) { 
     return d.id; 
    }) 
    .distance(function (d) { 
     return GetNodeDefaults(d.label).linkDistance; 
    }) 
    .strength(0.1); 

var simulation = d3.forceSimulation() 
    .force("link", forceLink) 
    .force("charge", d3.forceManyBody().strength(function (d, i) { 
     var a = i == 0 ? -2000 : -1000; 
     return a; 
    }).distanceMin(200).distanceMax(1000)) 
    .force("center", d3.forceCenter(width/2, height/2)) 
    .force("y", d3.forceY(0.01)) 
    .force("x", d3.forceX(0.01)) 
    .on("tick", ticked);

参考链接：在计算器上https://github.com/d3/d3-force/blob/master/README.md#link_distance

来源

2017-11-06 16:29:58

如何增加D3力布局中链接的长度

回答

相关问题