工具提示在d3組合條形圖中的X位置

Question

我不能完全弄清楚爲什麼X位置總是好像我徘徊在上面的那個吧位於第一組。

http://jsbin.com/xiboxupema/edit?js,console,output

不知道爲什麼，這是得到downvoted。我試圖使用矩形的x屬性來確定工具提示位置，但它似乎總是相對於「組」設置。我該如何解決這個問題？

state.selectAll("rect") 
     .data(function(d) { return d.ages; }) 
     .enter().append("rect") 
     .attr("width", x1.rangeBand()) 
     .attr("x", function(d) { return x1(d.name); }) 
     .attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }) 
     .style("fill", function(d) { return color(d.name); }); 

    state.selectAll("rect") 
    .on("mouseover", function(d){ 

     var yPos = parseFloat(d3.select(this).attr("y")); 
     var xPos = parseFloat(d3.select(this).attr("x")); 
     var height = parseFloat(d3.select(this).attr("height")) 
     var width = parseFloat(d3.select(this).attr("width")) 

     console.log(xPos); 

     d3.select(this).attr("stroke","red").attr("stroke-width",0.8); 

     svg.append("text") 
     .attr("x",xPos) 
     .attr("y",yPos + height/2) 
     .attr("font-family", "sans-serif") 
     .attr("font-size", "10px") 
     .attr("font-weight", "bold") 
     .attr("fill", "black") 
     .attr("text-anchor", "middle") 
     .attr("id", "tooltip") 
     .attr("transform", "translate(" + width/2 + ")") 
     .text(d.name +": "+ d.value); 

    }) 
    .on("mouseout", function(){ 
     svg.select("#tooltip").remove(); 
     d3.select(this).attr("stroke","pink").attr("stroke-width",0.2); 

    }); 

編輯：

顯然它不是相同的問題在我剛纔的問題中所描述的。使用transform屬性並不像解決堆疊條形圖那樣解決問題，因爲在堆疊條形圖中，所有矩形都在相同的X座標中，而在分組中它們不是。每個組都被視爲對象，因此獲得變換返回的點與最左邊的條形圖對齊，但與其餘的條形圖無關。現在，我可以通過獲得轉換並在組中爲每個小節的x位置添加一個值來獲得其正確的x座標來解決此問題。請刪除倒票。

Answer 1

啊，明白了！

state.selectAll("rect") 
    .data(function (d) { return d.ages; }) 
    .enter().append("rect") 
    .attr("width", x1.rangeBand()) 
    .attr("x", function (d) { return x1(d.name); }) 
    .attr("y", function (d) { return y(d.value); }) 
    .attr("height", function (d) { return height - y(d.value); }) 
    .style("fill", function (d) { return color(d.name); }); 

state.selectAll("rect") 
    .on("mouseover", function(d){ 

    var group = d3.select(d3.select(this).node().parentNode); 
    var xPos = d3.transform(group.attr("transform")).translate[0] + x1(d.name); 
    var yPos = parseFloat(d3.select(this).attr("y")); 
    var height = parseFloat(d3.select(this).attr("height")) 
    var width = parseFloat(d3.select(this).attr("width")) 

    d3.select(this).attr("stroke","red").attr("stroke-width",0.8); 

    svg.append("text") 
    .attr("x",xPos) 
    .attr("y",yPos + height/2) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "10px") 
    .attr("font-weight", "bold") 
    .attr("fill", "black") 
    .attr("text-anchor", "middle") 
    .attr("id", "tooltip") 
    .attr("transform", "translate(" + width/2 + ")") 
    .text(d.name +": "+ d.value); 

    }) 
    .on("mouseout", function(){ 
     svg.select("#tooltip").remove(); 
    d3.select(this).attr("stroke","pink").attr("stroke-width",0.2); 

    });