在 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 都会触发，并且我们可能不想替换提示图表，直到我们将鼠标悬停在另一个栏上。所以我们会记住我们悬停的最后一个 bar 的 id：

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/