Setting Up D3 Force Directed Graph

To the esteemed readers. I'm reasonably new in javascript and I have come across this problem. I'm trying to implement a modified version of this force directed graph: http://mbost

Solution 1:

d.source is an object, you can't use == to determine if tested is a similar object. Have a look at this answer for more details on object equality.

If you want to test for a specific value of the d.source object described below, which I assume you want, you need to specify it.

Here is the source object architecture : (I'm using the example you pointed so the data comes from the miserables.json)

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

Now, here is the broken part in your code :

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

It doesn't work because the return is misplaced. You're mixing ternary and return statements but you don't put them in the right order :

returntest ? value_if_true : value_if_false;

if you want to assign the value to x anyway, you can do

x = test ? value_if_true : value_if_false;
return x;

You should do something like this :

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

That's for the general syntax, but this won't work as is You need to pick one of the value for your test for example :

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

Also, if the variable from PHP is a string you should do

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

and in most cases you should use json_encode to map PHP variables into javascript ones.

As a final note, I would recommend using console functions coupled with Firebug's console panel if you're using Firefox, or the Chrome Developer Tool's console panel if you're using a Chromium based browser. It would allow you to debug your code more easily.

---

Working code

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) {
    returnMath.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) {
    returncolor(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;
    });
  });
});