ツールチップd3グループ化棒グラフのX位置

Question

私が上に乗っているバーが最初のグループに位置していたかのように、X位置が常にある理由を理解できません。これがdownvotedなっている理由

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

わかりません。私はツールチップの位置を決定するために矩形の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); 

    }); 

EDIT：

明らかにそのない私の前の質問で説明したものと同じ問題。積み上げ棒グラフでは、すべての矩形が同じ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); 

    });