在dc.js工具提示中添加图表

Question

我正在使用crossfilter和dc.js制作大量图表。其中，有行图和直方图（条形图）。

我要做的是在行图上创建一个显示直方图的工具提示。

查看此SO-question我看到了一个使用d3-tip的示例。我已尝试过这个jsfiddle。但是，我无法看到如何在工具提示中嵌入div。

有什么建议吗？ （如果使用普通d3更好，我就可以了。）

代码片段是：

function draw_row(div_id){ ...; return row_chart; }
function draw_hist(div_id){ ...; return bar_chart; }

var rate_chart = draw_row('#rate').title(function(){return'';});
dc.renderAll();

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function () {
        // What to put in here???
        draw_hist('#distr').render();
        return "<div id='distr'>Distribution<br></div>"
    });
d3.selectAll("#rate g.row")
    .call(tip)
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

Answer 1

有趣的项目！

是的，正如您所注意到的那样，当您进入.html()回调时，您无法呈现图表 - 这只会返回静态HTML，而且我不会这样做。我认为你可以给它一个元素。

因此，在生成HTML之后，我们必须找到一个要渲染的地方。幸运的是，d3-tip并没有尝试处理鼠标事件或类似的事情 - 显示提示的代码就在您发布的代码中：

.on('mouseover', tip.show)
.on('mouseout', tip.hide);

因此我们可以将tip.show包装在我们自己的函数中，然后在屏幕上将图表渲染到提示中。

我们必须注意，因为mouseover每次鼠标移动时都会触发，我们可能不想替换尖端图表，直到我们将鼠标悬停在另一个条形图上。所以我们会记住我们徘徊的最后一根酒吧的名字：

var last_tip = null;
d3.selectAll("#rate g.row")
    .call(tip)
    .on('mouseover', function(d) {
        if(d.key !== last_tip) {
            tip.show(d);
            draw_hist('#distr').render();
            last_tip = d.key;
        }
    })
    .on('mouseout', function(d) {
        last_tip = null;
        tip.hide(d);
    });

最后，d3-tip需要知道提示内容的大小才能在正确的位置呈现。 （如果它意外地在元素上呈现，当鼠标越过尖端时，这会导致可怕的闪烁，在元素上注册mouseout。）

因此，我们只是对其进行硬编码，因为我们无论如何都要对图表大小进行硬编码。 20个额外像素以符合标题：

.html(function (d) {
    return "<div id='distr' style='min-width:300px; min-height: 320px'>Distribution<br></div>"
});

使用d3-tip的默认半透明黑色样式看起来很酷：

这是你小提琴的分叉：https://jsfiddle.net/gordonwoodhull/hkx7j3r5/10/