Tại sao biểu đồ hướng d3 lực của tôi không hiển thị các cạnh?

Tôi đã tạo biểu đồ có hướng lực đơn giản bằng cách sử dụng d3: http://goo.gl/afHTD Tại sao biểu đồ hướng d3 lực của tôi không hiển thị các cạnh?

Tại sao các cạnh của biểu đồ không hiển thị? Đây là toàn bộ tập tin HTML của tôi. Bạn cũng có thể nhìn thấy nó và tinker với nó bằng cách đi xem nguồn trên trang liên kết của tôi tất nhiên. Nó dựa trên ví dụ từ trang web 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>

Không hiển thị các cạnh? Tệp JSON của tôi cũng khá đơn giản:

{"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}]}

Nguồn

2012-04-09 dangerChihuahua007

Bạn cần áp dụng kiểu đột quỵ qua CSS. Kiểu nút và liên kết hiện tại của bạn bị hạn chế đối với các phần tử HTML DIV, trong khi các nút và liên kết thực sự được biểu diễn dưới dạng vòng tròn SVG và các phần tử dòng, tương ứng. Hãy thử điều này:

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

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

Nguồn

2012-04-10 14:37:39 mbostock

Cảm ơn bạn! Thêm một cặp giá trị thuộc tính đột quỵ đã thực hiện thủ thuật. – dangerChihuahua007

Tại sao biểu đồ hướng d3 lực của tôi không hiển thị các cạnh?

Trả lời

Các vấn đề liên quan