डी 3 फोर्स निर्देशित ग्राफ का उपयोग कर नोड्स

Question

मूल के बजाय ग्रंथों: http://mbostock.github.com/d3/ex/force.html

अपने उदाहरण में के रूप में उपरोक्त लिंक पर प्रदान, मैं बस के बजाय उनके नाम के साथ चक्र नोड्स को बदलने के लिए कोशिश कर रहा हूँ। मुझे डी 3 और न ही जेएस/jquery के बारे में बहुत कुछ पता नहीं है, लेकिन मैं यह समझने की कोशिश कर रहा हूं कि यह कैसे काम करता है।

मैं svg के साथ नोड्स को प्रतिस्थापित करने में सक्षम था: पाठ लेकिन जब मैं करता हूं, तो वे जहां भी शुरू होते हैं, वे "स्पॉन" करते हैं और वे एनिमेट नहीं करते हैं।

मुझे नहीं पता कि मुझे यहां समूहों का उपयोग करना चाहिए या नहीं। अगर मैं करता हूं, तो मुझे सिखाओ।

अब तक, यह मेरा संशोधित कोड है:

<div id="chart"> 
</div> 

<script type="text/javascript"> 
<!-- 

var w = 960, 
    h = 500, 
    fill = d3.scale.category20(); 

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

d3.json("http://fourthdraft.com/ext/dataviz/miserables.json", function(json) { 
    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(70) 
     .nodes(json.nodes) 
     .links(json.links) 
     .size([w, h]) 
     .start(); 

    var link = vis.selectAll("line.link") 
     .data(json.links) 
    .enter().append("svg:line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 
     .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; }); 

    var node = vis.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("svg:text") 
     .attr("class", "node") 
     .attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .text(function(d) { return d.name; }) 
     .style("fill", function(d) { return fill(d.group); }) 
     .call(force.drag); 

    node.append("svg: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> 

Answer 1

इस बेला देखें: http://jsfiddle.net/nrabinowitz/QMKm3/6/

ऊपर अपने कोड के साथ मुख्य मुद्दा यह है कि आप सही तरीके से cx और cy गुण बदल रहा है (जो विशिष्ट हैं svg:circle तत्व) x और y पर जहां आपने svg:text तत्वों को जोड़ा था, लेकिन आपने उन्हें tick हैंडलर में नहीं बदला, जहां यह पुनरावृत्त लेआउट अपडेट हैप्पी एनएस:

force.on("tick", function() { 
    // snip 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
}); 

तुम भी बदलना चाहिए

var node = vis.selectAll("circle.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

से चयन और जोड़कर

var node = vis.selectAll("text.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

को हालांकि मुझे नहीं लगता कि इस के संदर्भ में किसी भी फर्क नहीं पड़ता है यह कोड, यह अंततः आपको यात्रा करेगा - डी 3, as explained here में, आप आमतौर पर "चयनकर्ता के साथ चयन करें" पैटर्न का उपयोग करते हैं, इस चयनकर्ता से मेल खाने वाले अनुपलब्ध नोड्स को जोड़ें, इस चयनकर्ता से मेल खाने वाले अतिरिक्त नोड्स को हटाएं "। आपके कोड में, आपके द्वारा जोड़े गए चयनकर्ता और नोड्स मेल नहीं खाते हैं, जो एक वैचारिक समस्या है, भले ही आपके कोड के लिखित रूप में कोई रैमिकेशन न हो। (मुझे ध्यान रखना चाहिए कि मुझे अभी भी यह पैटर्न थोड़ा उलझन में और अजीब लगता है। लेकिन कम से कम, इसके बाद यह आपके कोड को अन्य डेवलपर्स के लिए अधिक सुगम बना देगा।)