javascript - Hover effects in D3.js - Stack Overflow

admin管理员组

文章数量:1336602

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"},
 	{"name": "b", "size": 200, "url" : "www.altavista"}
	]
}

/** 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=".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>

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."},
 	{"name": "b", "size": 200, "url" : "www.altavista."}
	]
}

/** 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./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.

• javascript
• d3.js

Share Improve this question Follow asked Sep 27, 2015 at 4:16 Adam GerardAdam Gerard 74622 gold badges88 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： javascriptHover effects in D3jsStack Overflow