CODEWITHSUNDEEP
javascripthtmlsvgd3.jsforce-layout
A.G.
A.G.

Reputation: 744

Show div element on mouseover for node in D3 force layout

I need to show HTML div element on mouse over of node in graph generated by d3.js. Main purpose is to show additional information related to node on hover in structured manner. This information contains link, image and text. Below is the code which I have written for generation of graph. It is static graph where user can move nodes within window frame:

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

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

.node.fixed {
  border: 2px;
  border-color: #foo;
}

.link {
  stroke: #000;
  fill: none;
  stroke-width: 2px;
  cursor: default;
}

.nodeLabel {
  stroke: #000;
  stroke-width: 1px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 1000,
    height = 850;

var color = d3.scale.category20();
// A map from group ID to image URL.
var imageByGroup = {
  "0": "./images/1.png",
  "1": "./images/2.png",
  "2": "./images/3.png",
  "3": "./images/4.png",
  "4": "./images/5.png",
  "5": "./images/6.png",
  "6": "./images/7.png",
  "7": "./images/8.png",
  "8": "./images/9.png"
};


var force = d3.layout.force()
    .charge(-100)
    .linkDistance(150)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom().on("zoom", redraw));

// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").append("svg:marker")
    .attr("id", 'end-arrow')
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 17)
    .attr("refY", 0)
    .attr("markerWidth", 7)
    .attr("markerHeight", 7)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M5,0L0,-5L10,0L0,5L5,0")
    .attr('fill', '#000');  

d3.json("input.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style('marker-end', 'url(#end-arrow)');

 var drag = force.drag()
    .on("dragstart", dragstart);      

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(drag);

  node.append("image")
      .attr("xlink:href", function(d) {return imageByGroup[d.group];})
      .attr("x", -24)
      .attr("y", -24)
      .attr("width", 48)
      .attr("height", 48);  

    node.append("text")
        .attr("text-anchor", "middle")
        .attr("dy",35)
        .attr("class", "nodeLabel")
        .text(function(d) { return d.name; });    

  node.append("title")
      .text(function(d) { return d.id+"--"+d.name; });
  node.on("click", function(d){//alert(d.name)
  });

  force.on("tick", function() {
    node.attr("cx", function(d) { return Math.min(width,d.x); })
        .attr("cy", function(d) { return Math.min(height,d.y); })
        .attr("transform", function(d) { return "translate(" + Math.min(width,d.x)+ "," + Math.min(height,d.y) + ")"; });
    link.attr("x1", function(d) { return Math.min(width,d.source.x); })
        .attr("y1", function(d) { return Math.min(height,d.source.y); })
        .attr("x2", function(d) { return Math.min(width,d.target.x); })
        .attr("y2", function(d) { return Math.min(height,d.target.y); });       
  });


});

function redraw() {
  svg.attr("transform", " scale(" + d3.event.scale + ")");
}
  function dragstart(d) {
      d.fixed = true;
      d3.select(this).classed("fixed", true);
  }
</script>

Input JSON file is:

{
  "nodes":[
    {"id":0,"name":"n1","group":0,"x":50,"y":50,"fixed":true},
    {"id":1,"name":"n2","group":0,"x":200,"y":140,"fixed":true},
    {"id":2,"name":"n3","group":0,"x":200,"y":50,"fixed":true},
    {"id":3,"name":"n4","group":0,"x":350,"y":50,"fixed":true}
  ],
  "links":[
    {"source":1,"target":3,"value":1},
    {"source":0,"target":2,"value":1},
    {"source":0,"target":1,"value":1},
    {"source":2,"target":3,"value":1}
  ]
}

Text tooltip is working fine with above code but I need to show more images and links as well in formatted manner as mentioned above.

Also, it would be helpful if you could please let me know if I can change the image of node on hover to make it appear highlighted.

Upvotes: 2

Views: 4586

Answers (1)

Barnab&#233; Monnot
Barnab&#233; Monnot

Reputation: 1163

You simply need to bind actions with commands like :

node.on("mouseover", mouseover)
    .on("mouseout", mouseout)

Where mouseover and mouseoutare functions where you can get the hovered-on node in the argument :

function mouseover(d) {
    // d is the node object
    // You can even get mouse position with this command
    var mousePos = d3.mouse(this);
}

The book "Interactive Data Visualization" also has a chapter where it is explained how to make a tooltip appear.

Upvotes: 4

Related Questions