堆叠柱状图的 X 和 Y 坐标

Question

我需要帮助获取堆叠条形图中每个矩形的X和Y坐标。

我正在创建一个新的矩形，并希望它在堆叠条形图上方右侧的悬停矩形上创建。

这是我定义的鼠标移动函数，问题在于它只给出堆叠条形图中第一个矩形的y值。

function movein() {
    var allRect = d3.selectAll("rect")
                    // .transition()
                    // .duration(300)
                    .attr("opacity", 0)
                    .attr("display", "none")
d3.select(this)
      .attr("opacity", 1)
      .attr("display", "block")
d3.select('.g')
      .append("rect")
      .attr("y", function(d) { return y(d.y1); })
      .attr("x", 100)
      .attr("height", 50)
      .attr("width", 0)
      .attr("z-index", 1000)
      .attr("class", "rect-sec")
d3.select('.rect-sec')
        .transition()
        .duration(300)
        .attr("width", 200)
  };

请有人帮助获取每个矩形的X和Y坐标。

这是我参考的链接中的堆叠条形图。

- Unknown User

---

以上是 mouseover 函数，我会像这样调用它 .on("mouseover", movein)。您需要整个代码吗？ - Unknown User

好的，你可以使用 d3.select(this).attr("x") 来获取当前选中的rect元素的x坐标。 - Lars Kotthoff

谢谢。我明白了。非常感谢。请将其作为答案。 - Unknown User

你能告诉我如何将文字在堆叠条形图中居中对齐吗？ - Unknown User

将文本添加到中心并设置 .attr("text-anchor", "middle")。 - Lars Kotthoff

Answer 1

您可以在处理程序中选择this以访问当前元素，例如：您会这样做

var x = d3.select(this).attr("x");

获取x坐标的访问权限。

- Lars Kotthoff

---

你能告诉我如何获取选择柱的y坐标吗？比如第二或第三个柱的y坐标。 - Unknown User

您需要识别该条柱（例如，通过其数据），然后以类似的方式获取其坐标。 - Lars Kotthoff

如果我分配一个类，它适用于整个条形图。通过使用数据，我将如何做到这一点。在我的情况下，数据是动态的，经常会发生变化。你能告诉我如何通过数据来识别一个条形图吗？ - Unknown User

非常抱歉，我不明白你的意思。你能否给我发送一个带有可运行代码的链接，这样我就可以掌握它了吗？ - Unknown User

这是链接(http://stackoverflow.com/questions/20402130/d3-x-y-co-ordinates-of-select-bars-in-a-stack-graph)。请帮忙。 - Unknown User