CODEWITHSUNDEEP
javascriptd3.js
astro
astro

Reputation: 39

Highlighting child nodes in D3js v4

I have been trying to highlight connecting nodes in D3js force-directed visualisation. Using various tutorials around and the work of Mike Bostock, I have managed to highlight the node and the links, however, the sub-nodes do not get highlighted

The code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font-family: sans-serif;
  font-size: 10px;
}

</style>
</head>
<body>
<svg width="1000" height="1000"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().distance(function(d) { return d.distance; }).id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("data.json", function(error, graph) {
  if (error) throw error;

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter().append("g")
        .on("mouseover", fade(.1))
        .on("mouseout", fade(1))
    
  var circles = node.append("circle")
      .attr("r", 20)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  var lables = node.append("text")
      .text(function(d) {
        return d.id;
      })
      .attr('x', 6)
      .attr('y', 3);

  node.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);
    
  var linkedById = {};
    json.links.forEach(function(d) {
        linkedById[d.source.id + "," + d.target.id] = 1;
  });

  function neighboring(a, b) {
    return linkedById[a.id + "," + b.id] || linkedById[b.id + "," + a.id] || a.id == b.id;
  }

  function ticked() {
    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("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        })
  }
  function fade(opacity) {
    return function(d) {
      node.style("opacity", function(o) {
          return neighboring(d, o) ? 1 : opacity;
      });


      link.style("stroke-opacity", function(o) {
        return o.source === d || o.target === d ? 1 : opacity;
      });
    };
  } 
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
/*  Scaling nodes
function mouseover() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 30);
}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 20);
}
*/

</script>
</body> 
</html>

The Json file formatting sample

{
  "nodes": [
    {"id": "A", "group": 1},
    {"id": "B", "group": 1},
    {"id": "C", "group": 2},
    {"id": "D", "group": 2},
    {"id": "E", "group": 3},
    {"id": "F", "group": 3}
  ],
  "links": [
    {"source": "A", "target": "B", "value": 2, "distance": 300},
    {"source": "A", "target": "C", "value": 2, "distance": 300},
    {"source": "A", "target": "E", "value": 2, "distance": 300},
    {"source": "B", "target": "C", "value": 2, "distance": 300},
    {"source": "B", "target": "D", "value": 2, "distance": 300},
    {"source": "B", "target": "F", "value": 2, "distance": 300}
  ]
}

I am assuming it has something to do with me using named sources and targets rather than IDs? I have had a look at this http://jsfiddle.net/tristanreid/xReHA/636/

And the only difference I see is the way sources and targets are called. I would prefer to use named sources and targets because of the dataset I have.

Any assistance would be greatly appreciated.

Thanks in advance

Upvotes: 0

Views: 183

Answers (1)

Ruben Helsloot
Ruben Helsloot

Reputation: 13129

The only reason it doesn't work, is because you call your data graph, not json. Change the following line:

var linkedById = {};
json.links.forEach(function(d) {
    linkedById[d.source.id + "," + d.target.id] = 1;
});

to

var linkedById = {};
graph.links.forEach(function(d) {
    linkedById[d.source.id + "," + d.target.id] = 1;
});

And you'll see that suddently, linkedById gets properly populated, neighbouring nodes are identified correctly, and the highlighting works.

Upvotes: 1

Related Questions