XY Stacked Bar Coordinates

Question

I need help getting the X and Y coordinates from a complex histogram for each rectangle in a stacked histogram.

I create a new rectangle on hover. I want it to be created on the right side of the top of the hanging rectangle of the folded histogram.

Here's the mouse over the function that I defined, the problem is that it gives the y value of only the first rectangle of the stacked string.

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 me get the X and Y coordinates of each rectangle of the folded panel when you hover over.

This is the link where I link to the paginated bar chart.

Answer 1

this , , ..

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

x.