CODEWITHSUNDEEP
javascriptd3.js
optimus_prime
optimus_prime

Reputation: 827

Search functionality in a d3.js graph

I have a forced-directed graph.

Below is the format of the JSON data

var IDData = JSON.stringify([
  ["1000000000039214051", "1000000000336563307", "Customer", "Customer", "2016-06-21 01:32:42", "2016-06-21 02:39:45", 155.4492950439453, 4],
  ["1000000000039214051", "10000000682705", "Customer", "Agent", "2016-08-16 23:12:24", "2016-08-17 05:08:22", 171.84144592285156, 3],
  ["04144221227", "1000000000060220197", "Phone", "Customer", "2016-01-04 03:41:13", "2016-01-05 01:54:03", 264.75457763671875, 4],
  ["10000000490503", "1000000000060220197", "Agent", "Customer", "2016-10-21 03:39:50", "2016-10-21 06:59:41", 26.845823287963867, 4],
  ["1000000000218556629", "600169462257", "Customer", "Phone", "2016-10-05 21:51:01", "2016-10-06 02:41:32", 76.26348876953125, 4],
  ["10000000486511", "2000000000212907929", "Agent", "Customer", "2016-11-13 23:33:38", "2016-11-14 01:30:13", 114.56245422363281, 3],
  ["CHB445789", "1000000000313013892", "ID_Card", "Customer", "2016-01-04 01:50:38", "2016-01-04 08:12:44", 457.4786071777344, 4],
  ["10000000499929", "2000000000144964466", "Agent", "Customer", "2016-09-01 05:01:45", "2016-09-04 03:44:10", 121.28453826904297, 1],
  ["2000000000180876855", "2000000000249424289", "Customer", "Customer", "2016-05-23 05:03:58", "2016-05-23 08:35:11", 218.06622314453125, 1],..])

I parse through this dynamic JSON data as follows:

var galData = JSON.parse(IDData);
var startnodes = [];
var endnodes = [];
var startnodetype = [];
var endnodetype = [];
var SendTime = [];
var PayTime = [];
var Total_Amt = [];
var Depth = [];
galData.map(function(e, i) {
  startnodes.push(e[0]);
  endnodes.push(e[1]);
  startnodetype.push(e[2]);
  endnodetype.push(e[3]);
  SendTime.push(e[4]);
  PayTime.push(e[5]);
  Total_Amt.push(e[6]);
  Depth.push(e[7]);
});
var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth);
makeGraph("#Network_graph", final_data);

Below is the createNodes function that makes the nodes and links for the makeGraph function:

function createNodes(startnodes, endnodes, startnodetype, endnodetype, SendTime, PayTime, Total_Amt, Depth) {
      var node_set = [];
      var links = [];
      var nodetype = d3.set();
      startnodes.forEach(function(src, i) {
        var tgt = endnodes[i];
        if (!node_set.find(function(d) {
            return d.id == src
          })) {
          node_set.push({
            id: src,
            type: startnodetype[i]
          });
        }
        if (!node_set.find(function(d) {
            return d.id == tgt
          })) {
          node_set.push({
            id: tgt,
            type: endnodetype[i]
          });
        }
    
        links.push({
          source: src,
          target: tgt,
          sendtime: SendTime[i],
          paytime: PayTime[i],
          total_amt: Total_Amt[i],
          depth: Depth[i],
          value: 1
        });
      });
    
      startnodetype.forEach(function(src, i) {
        var tgt_type = endnodetype[i];
        nodetype.add(src);
        nodetype.add(tgt_type);
      });
    
      var d3GraphData = {
        nodes: node_set.map(function(d) {
          return {
            id: d.id,
            type: d.type,
            group: 1
          }
        }),
        links: links,
        nodetype: nodetype.values().map(function(d) {
          return {
            id: d.id,
            group: 1
          }
        })
      }
      return d3GraphData;
    
};

Now, I am trying to implement search functionality in my d3.js graph. User can enter a node "Id" in the search field and everything else apart from the selected node would have the opacity set to 0 for

duration(5000)

And back to 1 after that.

All the nodes have the property.

d.id

Below is the HTML and the event listener

    <input type = "text" id="node"/>
    <button id ="search">
    Search_Node
    </button>
 var myBtn = document.getElementById("search");

 myBtn.addEventListener("click", function () {
    //find the node
    var selectedVal = document.getElementById("node").value;
    var node = svg.selectAll(".node");
    if (selectedVal == "none") {
        node.style("stroke", "white").style("stroke-width", "1");
    } else {
        var selected = node.filter(function (d) {
            return d.id != selectedVal;
        });
        selected.style("opacity", "0");
        var link = svg.selectAll(".link")
        link.style("opacity", "0");
        d3.selectAll(".node, .link").transition()
            .duration(5000)
            .style("opacity", 1);
    }
});

I do not see any errors, but when I try and type in the Node Id that exists, the feature does not work, and nothing happens.

Below is the fiddle

Upvotes: 0

Views: 1610

Answers (1)

mkaran
mkaran

Reputation: 2718

Take a look at this:

https://jsfiddle.net/mkaran/7fxvvz8d/

The issue was that you were selecting the node group not the circles

var node = svg.append("g")// you were selecting this
  .attr("class", "nodes")
  .selectAll("circle")
  .data(d3GraphData.nodes)
  .enter()
  .append("circle")// instead of this
  .attr("class", "node") // so I added a class to make it easier
  .attr("r", 5)
  .attr("fill", function(d) {
    return color(d.type);
  })
  .on('mouseover', function(d) {
    tooltip.transition()
      .duration(600)
      .style("opacity", .8);
    tooltip.html(d.id + "<p/>type:" + d.type)
      .style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.transition()
      .duration(200)
      .style("opacity", 0);
  })
  .on("mousemove", function() {
    tooltip.style("left", (d3.event.pageX) + "px")
      .style("top", (d3.event.pageY + 10) + "px");
  })

  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

and the same goes for links

var link = svg.append("g")// you were selecting the group
  .attr("class", "links")// by this class
  .selectAll("line")
  .data(d3GraphData.links)
  .enter().append("line")
  .attr("stroke-width", 5)
  .attr("class", "link") // added a class on the lines

  .on('mouseover', function(d) {

    var thisSource = d.source.id,
      thisTarget = d.target.id;
    var filteredLinks = d3GraphData.links.filter(function(e) {
      return (e.source.id === thisSource && e.target.id === thisTarget) || (e.source.id === thisTarget && e.target.id === thisSource);
    });

In the button event:

myBtn.addEventListener("click", function () {
  //find the node
  var selectedVal = document.getElementById('node').value;
  var node = svg.selectAll(".node"); // you selected the group
  if (selectedVal == "none") {
    node.style("stroke", "white").style("stroke-width", "1");
  } else {
    var selected = node.filter(function (d) {
      return d.id != selectedVal;
    });
    selected.style("opacity", "0");
    var link = svg.selectAll(".link")// same here
    link.style("opacity", "0");
    d3.selectAll(".node, .link").transition()  // and here
      .duration(5000)
      .style("opacity", 1);
  }
});

I modified it to this:

myBtn.addEventListener("click", function () {
  //find the node
  var selectedVal = document.getElementById('node').value;
  var node = svg.selectAll(".node"); // select the circles
  if (selectedVal == "none") {
    node.style("stroke", "white").style("stroke-width", "1");
  } else {
    var selected = node.filter(function (d) {
      return d.id == selectedVal;
    });

    node.style("opacity", 0); // hide all nodes
    selected.style("opacity", 1)// but this one
      .attr("fill", "red");// just for the effect

    var link = svg.selectAll(".link")
      .style("opacity", 0);// hide all links
    // and then show them all again after some time
    node.transition()
      .duration(5000)
      .style("opacity", 1);
    link.transition()
      .duration(5000)
      .style("opacity", 1);
  }
});

Hope this helps! Good luck!

Upvotes: 1

Related Questions