为什么我的d3力指向图不显示边缘？

我使用d3创建了一个简单的力导向图：http://goo.gl/afHTD 为什么我的d3力指向图不显示边缘？

为什么图形的边缘没有显示？这是我的整个HTML文件。您也可以通过查看链接页面上的源代码来查看并修改它。它基于d3网站的示例。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Force-Directed Layout</title> 
    <script type="text/javascript" src="d3.v2.js"></script> 
    <style type="text/css"> 

div.node { 
    border-radius: 6px; 
    width: 12px; 
    height: 12px; 
    margin: -6px 0 0 -6px; 
    position: absolute; 
} 

div.link { 
    position: absolute; 
    border-bottom: solid #999 1px; 
    height: 0; 
    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 

    </style> 
    </head> 
    <body> 
    <div id="chart"></div> 
    <script type="text/javascript"> 

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select("#chart").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("newJson.json", function(json) { 
    force 
     .nodes(json.nodes) 
     .links(json.links) 
     .start(); 

    var link = svg.selectAll("line.link") 
     .data(json.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag); 

    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; }); 
    }); 
}); 

    </script> 
    </body> 
</html>

不应该var link...显示边缘？我的JSON文件也很简单：

{"nodes": 
    [{"name":"Myriel","group":1}, 
    {"name":"Napoleon","group":1}, 
    {"name":"Napoleon","group":2}], 
"links": 
    [{"source":1,"target":0,"value":1}, 
    {"source":1,"target":0,"value":1}, 
    {"source":1, "target":2, "value":1}]}

来源

2012-04-09 dangerChihuahua007

您需要通过CSS应用笔触样式。您当前的节点和链接样式仅限于HTML DIV元素，而节点和链接实际分别表示为SVG圆和线元素。试试这个：

.node { 
    fill: #000; 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

.link { 
    stroke: #aaa; 
    stroke-width: 1.5px; 
}

来源

2012-04-10 14:37:39 mbostock

谢谢！添加一个描边属性 - 值对就有诀窍。 – dangerChihuahua007 2012-04-10 16:32:18

为什么我的d3力指向图不显示边缘？

回答

相关问题