X & Y Co-ordinates of selective bars in a stack graph

Question

I have a stacked bar chart. And I'd like a draw a line like grouping few bars of a stacked bar chart.

Something like this.

So to do this I need to find the y coordinate of the 2nd and the last bar.

Some one please help in drawing those line using d3.

JS:

var width = 750,
      height = 500;

  var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

  var y = d3.scale.linear()
            .rangeRound([height, 0]);

  var color = d3.scale.ordinal()
                .range(["#D70B16", "#154CEF", "#1A8A55"]);

  var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");

  var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(d3.format(".2s"));

  var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
            return "Value: " + (d.y1 - d.y0) + "";
            })

  var svgContainer = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("transform", "translate(" + 30 + "," + 30 + ")");


  d3.csv("data.csv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "circle"; }));

    data.forEach(function(d) {
      var y0 = 0;
      d.hours = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

      d3.select('body').append('pre')
              .text(JSON.stringify(d.hours, null, '  '));


      d.total = d.hours[d.hours.length - 1].y1;
    });

    x.domain(data.map(function(d) {return d.circle;}));
    y.domain([0, d3.max(data, function(d) {return d.total;})])

    svgContainer.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

    svgContainer.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Login Hours");

    var circle = svgContainer.selectAll(".circle")
                    .data(data)
                    .enter().append("g")
                    .attr("class", "g")
                    .attr("transform", function(d) { return "translate(" + x(d.circle) + ",0)"; });

    circle.selectAll("rect")
          .data(function(d) { return d.hours; })
          .enter()
          .append("rect")
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.y1); })
          .attr("height", function(d) { return y(d.y0) - y(d.y1); })
          .on("mouseover", tip.show)
          .on("mouseout", tip.hide)
          .style("fill", function(d) { return color(d.name); });


    circle.selectAll("text")
          .data(function(d) { return d.hours; })
          .enter()
          .append("text")
          .attr("x", 75)
          .attr("y", function(d, i) { return y(d.y1) ; })
          .style("text-anchor", "middle")
          .text("test")

  })

Answer 1

How you determine those values (and the bars) depends on how you can identify them. In this particular case, you don't actually need to get the rect items because the underlying data gives you access to everything you need.

To, for example, get the y coordinate of the second bar in the first column, you can use the following code:

var yCoord = y(data[0].hours[1].y1);