5

尊敬する読者へ。私はJavaScriptの初心者で、この問題に遭遇しました。この強制有向グラフの修正版を実装しようとしています:

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

json データは、php スクリプトからオンザフライで生成されます。アイデアは、(php スクリプトで定義された) 1 つの特定のノードに接続するすべての線を 1 つの色で、その他すべてを灰色の色合いで色付けすることです。私は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>
4

1 に答える 1

8

d.sourceはオブジェクトであるため、が同様のオブジェクトである==かどうかを判断するために使用することはできません。オブジェクトの同等性の詳細については、この回答を参照してください。tested

以下で説明するオブジェクトの特定の値をテストする場合はd.source、それを指定する必要があります。

ソースオブジェクトのアーキテクチャは次のとおりです:(私はあなたが指摘した例を使用しているので、データはから来ています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.

これは一般的な構文ですが、これはそのままでは機能しません。たとえば、テストの値の1つを選択する必要があります。

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

また、PHPの変数が文字列の場合は、次のようにする必要があります。

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

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

最後に、Firefoxを使用している場合はFirebugconsoleのコンソールパネルと組み合わせて機能を使用することをお勧めします。Chromiumベースのブラウザを使用している場合はChromeDeveloperToolのコンソールパネルを使用することをお勧めします。これにより、コードをより簡単にデバッグできるようになります。

作業コード

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;
    });
  });
});
于 2012-05-07T02:46:29.050 に答える