tooltip X position in d3 grouped bar chart

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); 

    }); 

EDIT:

Очевидно, его не тот же вопрос, как описана в моем предыдущем вопросе. Использование свойства 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); 

    });