javascript - D3.js 中的悬停效果

Question

这是我在 Stack 上的第一个(也许是第二个)问题。抱歉，如果不是格式化或丢失关键数据。如果需要，将进行更新!

一个小项目有以下代码片段。我正在使用 d3.js 可视化/演示库:

{
 "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>

我正在尝试在节点上添加悬停/点击效果:

(1) 这样，当您单击它时，它会打开 url。 (2) 当您悬停时，它会将文本更改为蓝色。

Answer 1

以下是解决此问题的方法:

(1) 这样当您点击时它会打开 url。

将点击监听器附加到圆圈获取 url 并创建一个标签。

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

(2) 当您悬停时，它会将文本更改为蓝色。 您必须在节点上注册鼠标悬停和鼠标移出。 将鼠标悬停在上面时，文本会变为蓝色 鼠标移开时，你会像这样把它变黑

.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");
}).

所以完整的，它会像这样:

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();
    }
});

完整的工作代码 here .