在鼠標懸停中添加標籤到sunburst的中間

Question

我一直在研究sunburst可視化示例，該示例由以下鏈接http://bl.ocks.org/mbostock/4063423提供。我希望標籤顯示已被隱藏的問題分區的名稱。現在，只要我將鼠標懸停在分區上，它就會在中間顯示「flare」。有沒有辦法讓我訪問孩子的名字？

d3.json("flare.json", function(error, root) { 
var path = svg.datum(root).selectAll("path") 
.data(partition.nodes) //access the nodes 
.enter() 
.append("path") 
.attr("display", function(d) { return d.depth ? null : 'none';}) //hide inner ring 
.attr("d", arc)//used whenever I come across a path 
.style("stroke", "#fff") 
.style("fill", function(d) { return color((d.children ? d : d.parent).name);}) 
.style("fill-rule", "evenodd") 
.each(stash) 
.on("mouseover", mouseover) 
.on("mouseout", mouseout); 

var label = svg.append("text") 
     .attr("id", "tooltip") 
     .attr("x", 10) 
     .attr("y", 50) 
     .attr("text-anchor", "middle") 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "11px") 
     .attr("font-weight", "bold") 
     .attr("fill", "black") 
     .style("opacity", 0) 
     .text(function(d) { return d.name; }); 

function mouseover(d) { 

    d3.select(this) 
     .transition() 
     .duration(100) 
     .style("opacity", 0.3); 

label.style("opacity", .9); 


console.log('mouseover', mouseover);  
    }; 

function mouseout(d) { 
d3.select(this) 
     .transition() 
     .duration(100) 
     .style("opacity", 1); 

     label.style("opacity", 0); 

console.log('mouseout', mouseout); 
    }; 

Answer 1

這個問題是通過首先將文本元素追加到g元素而不是svg元素來解決的。其次，你想在mousehandler外部用特定的id創建一個文本元素，然後在事件處理程序中使用該Id來調用它，就像這樣。

d3.json("flare.json", function(error, root) { 
var g = svg.selectAll("g") 
    .data(partition.nodes(root)) 
.enter().append("g"); 

var path = 
     g.append("path") 
     .attr("display", function(d) { return d.depth ? null : 'none';}) //hide inner ring 
     .attr("d", arc)//used whenever I come across a path 
     .attr("id", "part") 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : d.parent).name);}) 
     .style("fill-rule", "evenodd") 
     .each(stash) 
     .on("mouseover", mouseover) 
     .on("mouseout", mouseout); 

var text = g.selectAll("text") 
      .data(partition.nodes(root)) 
      .enter() 
      .append("text") 
      .attr("id", "tip") 
      .attr("x", 10) 
      .attr("y", 50) 
      .attr("font-size", "11px") 
      .style("opacity", 0); 


function mouseover(d) { 

    d3.select(this) 
     .transition() 
     .duration(1000) 
     .ease('elastic') 
     .style("opacity", 0.3); 

//label.style("opacity", .9); 
d3.select("#tip").text(d.name).style("opacity", 0.9); 

console.log('mouseover', mouseover);  
}; 

function mouseout(d) { 
d3.select(this) 
     .transition() 
     .duration(100) 
     .style("opacity", 1); 

d3.select("#tip").text(d.name).style("opacity", 0); 

console.log('mouseout', mouseout); 
    };