Geek asks and answers

Setting D3 Directional Force Graph

Dear Readers I am new to javascript and I came across this problem. I am trying to implement a modified version of this directional graph:

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

Json data is generated on the fly with php script. The idea is to color all the lines connecting one particular node (defined in the PHP script) with one color, and all the rest in shades of gray. I am trying to do this by comparing the source variable in the json file with the variable from the PHP script and changing the color when it is:

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

however this does not work. The script works fine, but without changing color, if I just do it

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

I looked at it all day, trying to figure out how to do it, and I was stuck. Any help would be greatly appreciated!

Here is my full script

<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>
+5
1

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.

, , . , :

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

, PHP ,

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

json_encode PHP javascript.

console Firebug, Firefox, Chrome Developer, Chromium. .

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

More articles:


All Articles