DC.js - 复合图表 - 访问renderlet中的堆栈编号并发出网格线

Question

我正在尝试为DC图表实现D3工具提示。

这是堆积条形图的分组：

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

要在renderlet中访问这些值，我使用的是d.data.key，d.y，d.data.value.top等。以下是代码片段：

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

但我无法在鼠标悬停时获得堆栈编号。

什么是d3.js等效代码来访问'renderlet中堆积条形图中的堆栈号？

fiddle for the same.

---

编辑

我在系列图表中遇到了另外一个问题。我在工具提示的系列图表中使用相同的逻辑。而不是'rect'我使用'circle'，所以当在某个数据点上盘旋时，工具提示会显示出来。圆形按预期运行，但各自的水平和垂直网格线存在一些问题。

1. 它们不会在鼠标移动时消失并停留，直到另一个圆圈悬停。
2. 由于它是一个系列图表，因此有多行，并且在一行中的数据点上的鼠标悬停似乎不受另一行上的鼠标悬停的影响。如下图所示：

如图所示，蓝线上的网格线仍然可见，即使它在橙色线上徘徊。

我该如何解决这些问题？

Here is the updated fiddle

Answer 1

查看rect d.layer的绑定数据等于该组的堆栈数。