D3.js中的懸停效果

Question

這是我在堆棧上的第一個（也許是第二個）問題。很抱歉，如果不是格式化或丟失關鍵數據。如果需要的話會做更新！

對於一個小項目，有以下幾段代碼。我使用的是d3.js可視化/演示庫：

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

/** CSS */ 
 

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

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

 
.link { 
 
\t fill: none; 
 
\t stroke: #ccc; 
 
\t stroke-width: 2px; 
 
}

<!-- HTML w/ d3.js --> 
 

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

 
\t <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 + ")"; }) 
 
    \t 
 
    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; }) 
 
    \t }) 
 
    
 
}); 
 

 

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

我試圖在節點添加懸停/點擊效果：

（1），這樣當你點擊它打開網址。 （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

請接受答案，如果它解決了你的問題:)