DC.js - Composite charts - Access the stack number inside renderlet and issue with gridlines

Question

I am trying to implement D3 tooltip for DC charts.

This is the grouping for a stacked bar chart:

var XDimension = ndx.dimension(function(d) {
    return d.no;
  });

  var YDimension = XDimension.group().reduce(
    function reduceAdd(p, d) {
      ++p.count;
      p.bottom += +d.bottom;
      p.top += +d.top;
      p.extra += +d.extra;
      p.avg = p.bottom ? (p.top / p.bottom) : 0;
      p[d.sub_no] = (p[d.sub_no] || 0) + p.bottom ? (p.top / p.bottom) : 0;

      return p;
    },
    function reduceRemove(p, d) {
      --p.count;
      p.bottom -= +d.bottom;
      p.top -= +d.top;
      p.extra -= +d.extra;
      p.avg = p.bottom ? (p.top / p.bottom) : 0;
      p[d.sub_no] = (p[d.sub_no] || 0) - p.bottom ? (p.top / p.bottom) : 0;

      return p;
    },
    function reduceInitial() {
      return {
        count: 0,
        bottom: 0,
        top: 0,
        extra: 0,
        avg: 0
      };
    });

To access these values in renderlet, I am using d.data.key, d.y, d.data.value.top etc. Here is the code snippet:

stacks.on('renderlet', function(chart) {
    chart.selectAll('g.x text')
      .attr('transform', 'translate(-10,10) rotate(315)')
    chart.selectAll('rect')
      .on("mouseover", function(d) {
        d3.select(this)
          .transition()
          .duration(500)
        div.transition()
          .duration(200)
          .style("opacity", 0.9);
        div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key + ' [' + d.data.value[this] + '] ' +
            '</th></tr></thead><tbody> <tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Value: ' +
            '</b></td> <td>' + numberFormat(d.y) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Extra: ' + '</b></td> <td>' + numberFormat(d.data.value.extra) + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'Top: ' + '</b></td> <td>' + numberFormat(d.data.value.top) + '</td></tr>' + '</tbody></table>')
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function() {
        d3.select(this)
          .transition()
          .duration(500)
        div.transition()
          .duration(500)
          .style("opacity", 0)
      })

But I am not able to get the stack number on mouseover.

What is the d3.js equivalent code to access the stack number in the stacked bar chart inside 'renderlet ?

fiddle for the same.

---

Edit

I am facing one more problem, in series chart. I'm using the same logic in a series chart for tooltip. instead of 'rect' I use 'circle', so when hovered on a certain data point in line, tooltip get displayed. Circle acts as expected, but there are some problems with respective horizontal and vertical grid lines.

1. They do not disappear on mouseout and stay until another circle is hovered upon.
2. Since its a series chart, there are multiple lines, and mouseover on a datapoint in one line does not seem to be affected by mouseover on another line. As shown in the below image:

As shown in image, the gridline on the blue line remains visible even when its is hovered up on orange line.

How do I fix these?

Here is the updated fiddle

Answer 1

Looking at the bound data to a rect d.layer is equal to the stack number of the group.