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

Question

我正在使用crossfilter和构建许多图表dc.js。其中，有一个行图和一个直方图（条形图）。

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

看着这个SO-question我看到了一个使用d3-tip. 我在这个jsfiddle 中进行了尝试。但是，我看不到如何div在工具提示中嵌入 a 。

有什么建议吗？（如果使用普通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每次鼠标移动时都会触发，而且我们可能不想替换提示图表，直到我们将鼠标悬停在另一个条形上。所以我们会记住我们悬停的最后一个栏的 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/