D3.js 工具提示X在d3分组条形图中的位置

我不太明白为什么X的位置总是好像我在上面悬停的那个条位于第一组

不知道为什么这会被否决。我试图使用矩形的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位置值来解决这个问题，以获得其正确的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 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);

   });

---

你在做什么？你昨天问了这个问题，我给了你一个答案：现在你发布了相同的问题和完全相同的答案，就好像它是你的一样！你的观点是什么？我投票决定把它作为一个副本关闭。请看我上面的评论。这是一个稍有不同的问题，我一直在努力解决这个问题。在我昨天的帖子里，你昨天的回答得到了充分的信任…问题是什么？