爲什麼我的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力指向圖不顯示邊緣？

回答

相關問題