Question

这是我在Stack上的第一个（也许是第二个）问题。对不起，如果它不格式化或丢失关键数据。如果需要，将进行更新！

为小项目提供以下代码段。我正在使用d3.js可视化/演示文稿库：

＆＃13;

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

＆＃13;

/** 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;
}

＆＃13;

<!-- 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>

＆＃13;

我试图在节点上添加悬停/点击效果：

（1）这样当你点击它时会打开网址。（2）当您悬停时，它会将文本更改为蓝色。

Answer 1

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

（1）这样当你点击它时会打开网址。

将一个点击监听器附加到圆圈获取网址并制作一个标签。

.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。

D3.js中的悬停效果

1 个答案: