D3強制有向グラフの設定

Question

尊敬する読者に。私は合理的にjavascriptで新しく、私はこの問題に遭遇しました。私はこの力有向グラフの修正バージョンを実装しようとしています：

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

JSONデータは、PHPスクリプトからオンザフライで生成されます。アイデアは、ある特定のノード（phpスクリプトで定義されている）に接続しているすべての行を1つの色で色付けし、他はすべてグレーの色合いで色付けすることです。私は、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文を混合しているが、あなたは正しい順序でそれらを入れないでください：あなたはとにかくxに値を割り当てる場合

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. 

：このような何かを行う必要がありますUは、たとえば、あなたのテストのための値のいずれかを選択する必要があります：PHPの変数が文字列の場合

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

また、あなたがすべき

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

と、ほとんどの場合、あなたはにjson_encodeを使用する必要がありますPHP変数をjavascriptにマップします。

最後の注意点として、私はあなたがクロムベースのブラウザを使用している場合consoleFirebugと相まって機能「Firefoxを使用している場合のコンソールパネル、または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; 
    }); 
    }); 
});