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

Question

我正在使用 crossfilter 和 dc.js 构建大量图表。其中，有一个柱状图和一个直方图（条形图）。

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

正在看这个SO-question I saw an example using d3-tip. I have made an attempt in this 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() 回调中您将无法呈现图表 - 只有 returns 静态 HTML，而且我不认为你可以给它一个元素来代替。

所以我们必须在 HTML 已经生成之后找到一个渲染的地方。幸运的是，d3-tip 不会尝试处理鼠标事件或类似事件 - 显示提示的代码就在您发布的代码中：

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

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

我们必须小心，因为每次鼠标移动时 mouseover 都会触发，我们可能不想替换 tip-chart，直到我们将鼠标悬停在另一个栏上。所以我们会记住我们悬停的最后一个柱的 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。）

所以我们只是 hard-code，因为无论如何我们都是 hard-coding 图表大小。 20 个额外的像素以适合标题：

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

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

这是你的 fiddle 的分支：https://jsfiddle.net/gordonwoodhull/hkx7j3r5/10/

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

Add graph in dc.js tooltip

tooltip

d3.js

dc.js