X Y Co-ordinates of Stacked Bar

Question

I need some help in getting the X and Y Co-ordinates of a stacked bar chart for each rect in the stacked bar chart.

I'm here creating a new rectangle on hover. I want the to be created on right side top of the hovered rectangle of the stacked bar chart.

Here's the mouse over function I've defined, problem is it's giving the y value of only the first rect of a stacked bar.

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

Someone please help in getting X and Y co-ordinates of each rectangle of a stacked bar on hover.

This is the link where i'm refering for the stacked bar chart.

user_1172002 · Answer

You can select this inside the handler to get access to the current element, i.e. you would do

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

to get access to the x coordinate.

X Y Co-ordinates of Stacked Bar

1 Answers