Perché il mio grafico diretto alla forza d3 non visualizza i bordi?

Ho creato un semplice grafico forza-diretto utilizzando d3: http://goo.gl/afHTD Perché il mio grafico diretto alla forza d3 non visualizza i bordi?

Perché i bordi del grafico non vengono visualizzati? Ecco il mio intero file HTML. Si potrebbe anche vederlo e armeggiare con esso andando a visualizzare la fonte sulla mia pagina collegata, naturalmente. È basato sull'esempio dal sito 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>

Non dovrebbe var link... visualizzare i bordi? Il mio file JSON è anche piuttosto semplice:

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

fonte

2012-04-09 dangerChihuahua007

È necessario applicare uno stile di tratto tramite CSS. Gli attuali stili di nodo e collegamento sono limitati agli elementi DIV HTML, mentre i nodi e i collegamenti sono in realtà rappresentati come elementi di cerchio e di linea SVG, rispettivamente. Prova questo:

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

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

fonte

2012-04-10 14:37:39 mbostock

Grazie! L'aggiunta di una coppia valore-valore di ictus ha funzionato. – dangerChihuahua007

Perché il mio grafico diretto alla forza d3 non visualizza i bordi?

risposta

Problemi correlati