CODEWITHSUNDEEP
javascriptd3.js
Adam Gerard
Adam Gerard

Reputation: 746

Hover effects in D3.js

This is my first (maybe second) question here on the Stack. Sorry if it's not to format or missing key pieces of data. Will make updates if need be!

Have the following pieces of code for a small project. I'm using the d3.js visualization/presentation library:

{
 "name": "Super fun time",
 "children": [
 	{"name": "a", "size": 200, "url": "www.google.com"},
 	{"name": "b", "size": 200, "url" : "www.altavista.com"}
	]
}
/** CSS */

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

.node text {
	color: red;
	text-shadow:#fff 0px 1px 0, #000 0 -1px 0;
}

.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 2px;
}
<!-- HTML w/ d3.js -->

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	<script>

var width = 500,
    height = 500;

var cluster = d3.layout.cluster()
    .size([height, width - 300]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(120,0)");

d3.json(#SUPER FUN TIME HERE#, function(error, root) {
  if (error) throw error;

  var nodes = cluster.nodes(root),
      links = cluster.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
    	
  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; })
  	})
    
});


d3.select(self.frameElement).style("height", height + "px");
      
</script>

Am trying to add hover/click effects over the nodes:

(1) So that when you click it opens the url. (2) When you hover, it changes text to blue.

Upvotes: 4

Views: 12846

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Here is how you should approach this problem:

(1) So that when you click it opens the url.

Attach a click listener to the circle get the url and make a tab.

.on("click", function (d) {
    if(d.url){
        var win = window.open(d.url, '_blank');
        win.focus();
    }
})

(2) When you hover, it changes text to blue. You have to register a mouseover and mouse out on the node. On mouse over you make the text blue On mouse out you make it black like this

.on("mouseover", function (d) {
   d3.select(this.parentNode).select("text").style("fill", "blue");
}).on("mouseout", function (d) {
d3.select(this.parentNode).select("text").style("fill", "black");
}).

So in full, it will like this:

d3.select(this.parentNode).select("text").style("fill", "blue");
}).on("mouseout", function (d) {
    d3.select(this.parentNode).select("text").style("fill", "black");
}).on("click", function (d) {
    if (d.url) {
        var win = window.open(d.url, '_blank');
        win.focus();
    }
});

Full working code here.

Upvotes: 4

Related Questions