मेरा डी 3 बल-निर्देशित ग्राफ किनारों को प्रदर्शित क्यों नहीं करता है?

मैंने डी 3: http://goo.gl/afHTD मेरा डी 3 बल-निर्देशित ग्राफ किनारों को प्रदर्शित क्यों नहीं करता है?

का उपयोग करके एक सरल बल-निर्देशित ग्राफ बनाया है ग्राफ के किनारे क्यों नहीं दिख रहे हैं? यहां मेरी पूरी HTML फ़ाइल है। पाठ्यक्रम के मेरे लिंक किए गए पृष्ठ पर स्रोत देखने के लिए आप इसे भी देख सकते हैं और इसके साथ टिंकर कर सकते हैं। यह डी 3 वेबसाइट से उदाहरण पर आधारित है।

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

आपको सीएसएस के माध्यम से स्ट्रोक शैली को लागू करने की आवश्यकता है। आपका वर्तमान नोड और लिंक शैलियों HTML DIV तत्वों तक सीमित हैं, जबकि नोड्स और लिंक वास्तव में क्रमशः एसवीजी सर्कल और लाइन तत्वों के रूप में दर्शाए जाते हैं। इसे आज़माएं:

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

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

स्रोत

2012-04-10 14:37:39 mbostock

धन्यवाद! एक स्ट्रोक संपत्ति-मूल्य जोड़ी जोड़ना चाल था। – dangerChihuahua007

मेरा डी 3 बल-निर्देशित ग्राफ किनारों को प्रदर्शित क्यों नहीं करता है?

उत्तर

संबंधित मुद्दे