設置D3力向圖

Question

給尊敬的讀者。我相當新的JavaScript，我遇到了這個問題。我想實現這個力有向圖的修改版本：從PHP腳本動態生成

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

JSON數據。這個想法是用一種顏色將所有連接到一個特定節點（在php腳本中定義）的線着色，而所有其他線則用灰色漸變着色。我試圖通過在JSON文件源變量匹配從PHP腳本變量，改變顏色時就是這個樣子真的做到這一點：

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，你可以做

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. 

這對一般的語法，但這將無法正常工作是呦u需要挑選價值的爲您的測試，例如：

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

而且，如果從PHP變量是一個字符串，你應該做的

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

，在大多數情況下，你應該使用json_encode來將PHP變量映射到JavaScript的變量。作爲最後一點，我建議您使用console功能，如果您使用的是Firefox，則可以使用Firebug的控制檯，如果您使用的是基於Chromium的瀏覽器，則使用Chrome Developer Tool的控制檯。它可以讓你更容易地調試你的代碼。

---

工作代碼

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