डी 3 बल निर्देशित ग्राफ

Question

प्रतिष्ठित पाठकों को सेट अप करना। मैं जावास्क्रिप्ट में काफी नया हूं और मैं इस समस्या में आया हूं। मैं इस बल निर्देशित ग्राफ का एक संशोधित संस्करण को लागू करने की कोशिश कर रहा हूँ:

http://mbostock.github.com/d3/ex/force.html

json डेटा एक php स्क्रिप्ट से जेनरेट कर दिए है। विचार एक रंग में एक विशिष्ट नोड (एक php स्क्रिप्ट में परिभाषित) से जोड़ने वाली सभी लाइनों को रंगना है और अन्य सभी ग्रे के रंगों में रंगना है। मैं php स्क्रिप्ट से चर करने के लिए json फ़ाइल में स्रोत चर मिलान और रंग बदलने जब कि इस तरह से सच है द्वारा यह क्या करने की कोशिश कर रहा हूँ:

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);}) 
    .style("stroke-opacity", function(d) { return d.value/10;}) 
    .style("stroke", function(d) { 
    x = (tested == d.source) ? return '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true. 
    }) 

लेकिन यह काम नहीं करता। स्क्रिप्ट ठीक लेकिन रंग बदलने के बिना काम करता है अगर मैं कुछ ही दिन इस किया पाने के लिए पता लगाने की कोशिश के लिए इस

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);}) 
    .style("stroke-opacity", function(d) { return d.value/10;}) 
    .style("stroke", function(d) { 
    return '#707070'; 
    }) 

इस पर मैं घूर कर रहा है क्या करना है और मैं अटक कर रहा हूँ। किसी भी तरह की सहायता का स्वागत किया जाएगा!!

यहाँ मेरा पूरा स्क्रिप्ट

<script type="text/javascript"> 

var width = 1200, 
    height = 1200; 

var color = d3.scale.category20(); 

var tested=<?php echo $tested_source;?>; //<-- the variable from php 

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

d3.json("data.json", function(json) { 

var force = d3.layout.force() 
    .charge(-130) 
    .linkDistance(function(d) { return 500-(50*d.value);}) 
    .size([width, height]); 

    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);}) 
     .style("stroke-opacity", function(d) { return d.value/10;}) 
     .style("stroke", function(d) { 
     x = (tested == d.source) ? return '#1f77b4' : '#707070'; //<-- Attempt to change the color of the link when this is true. But is is not working... :(
     }) 


    var node = svg.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 12) 
     .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> 

Answer 1

d.source है एक वस्तु है, तो आप == उपयोग नहीं कर सकते, तो tested एक ऐसी ही वस्तु है निर्धारित करने के लिए। Have a look at this answer for more details on object equality.

यदि आप नीचे वर्णित d.source ऑब्जेक्ट के विशिष्ट मान के लिए परीक्षण करना चाहते हैं, जो मुझे लगता है कि आप चाहते हैं, तो आपको इसे निर्दिष्ट करना होगा।

यहाँ स्रोत ऑब्जेक्ट वास्तुकला है: (मैं the example you pointed उपयोग कर रहा हूँ ताकि डेटा miserables.json से आता है)

source: Object 
    group: 4 
    index: 75 
    name: "Brujon" 
    px: 865.6440689638284 
    py: 751.3426708796574 
    weight: 7 
    x: 865.9584580575608 
    y: 751.2658636251376 

अब, यहाँ अपने कोड में टूटा हुआ हिस्सा है:

x = (tested == d.source) ? return '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true. 

यह काम नहीं करता है क्योंकि वापसी गलत है। आप त्रिगुट और return बयान मिश्रण कर रहे हैं लेकिन आप उन्हें सही क्रम में डाल नहीं है:

return test ? value_if_true : value_if_false; 

अगर आप वैसे भी एक्स के लिए मान देना चाहते हैं, तो आप

x = test ? value_if_true : value_if_false; 
return x; 

आप क्या कर सकते हैं कुछ इस तरह करना चाहिए:

return (tested == d.source) ? '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true. 

सामान्य वाक्य रचना के लिए है कि है, लेकिन इस के रूप में काम नहीं करेगा यो है यू उदाहरण के लिए अपने परीक्षण के लिए मूल्य में से एक लेने के लिए की जरूरत है:

return (tested === d.source.name) ? '#1f77b4' : '#707070'; 

इसके अलावा, अगर PHP से चर एक स्ट्रिंग है आपको क्या करना चाहिए

var tested="<?php echo $tested_source;?>"; //<-- the variable from php 

और ज्यादातर मामलों में आप के लिए json_encode का उपयोग करना चाहिए जावास्क्रिप्ट वाले में PHP चर वैरिएबल।

एक अंतिम नोट के रूप में, मैं 'यदि आप Firefox का उपयोग कर रहे हैं, या Chrome Developer Tool रों कंसोल पैनल के कंसोल पैनल आप एक क्रोमियम आधारित ब्राउज़र उपयोग कर रहे हैं console कार्यों Firebug के साथ मिलकर का उपयोग कर की सिफारिश करेंगे। यह आपको अपने कोड को अधिक आसानी से डीबग करने की अनुमति देगा।

---

कार्य कोड

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); 

var tested = 20; 

d3.json("miserables.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); 
    }).style("stroke-opacity", function (d) { 
    return d.value/10; 
    }).style("stroke", function (d) { 
    return (tested == d.source.index) ? '#ee3322' : '#707070'; //'#1f77b4' 
    }); 

    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; 
    }); 
    }); 
});