将 qtip2 工具提示与 d3.js 一起使用

Question

我是 d3.js 新手，正在使用 treemap example。原始示例在将鼠标悬停在特定部分时显示工具提示。我想改用qtip2 工具提示。

在 d3.js 示例中，以下行用于添加默认工具提示，即通过设置 title 属性：

g.append("rect")
    .attr("class", "parent")
    .call(rect)
    .append("title")
    .text(function(d) { return "total: " + formatNumber(d.value); });

qtip2 网站建议使用 (jQuery) 行

$('[title]').qtip(); 

会将默认工具提示替换为 qtip2 变体。但是，它不会出现在任何地方。我应该这样称呼它吗？

我能够通过向 rect 元素添加一个类来生成一个 qtip2 工具提示，就像这样

   g.append("rect")
    .attr("class", "parent")
    .classed({'QTIP2': true})
    .call(rect)
    .append("title")
    .text(function(d) { return "total: " + formatNumber(d.value); });

紧随其后

$('rect.QTIP2').qtip({
    content:  'Total number of hits:' + "some value",   
    position: {my: 'center',  at: 'center'},
    style: {width: 75, classes: 'qtip-dark qtip-shadow'},
            show: { effect: function(offset) {$(this).fadeIn(500);}}        
});

但是，我不知道如何通过 d3 中使用的实际 d 值更改“some value”字符串。 我对 d3.select(this) 、 datum() 和 __data__ 属性有些熟悉，但我无法让它工作。 $('rect.QTIP2').text() 行也产生了一些结果，但是，这给出了所有矩形的值，而不仅仅是你悬停的那个。

非常感谢任何帮助！

Answer 1

$('[title]').qtip(); 行不起作用，因为它正在寻找具有 "title" 属性 的元素（如在 HTML 中），而不是寻找具有子 @ 的元素987654327@ 元素（这是在 SVG 中处理标题的方式）。所以选择器不会返回任何元素，也不会创建任何工具提示。正如您所发现的，只要您的 JQuery 选择器实际返回有效元素，您就可以让您的 qtip 工作。

要访问数据，您需要深入了解细节。 d3 数据存储在元素属性__data__ 中。访问元素属性（与元素属性不相同）的 JQuery 方法是.prop( propertyName )。

所以你的代码会是这样的

$('rect.QTIP2').qtip({
    content: {
       text: function(event, api) {
                 return  'Total number of hits:' + 
                    formatNumber( $( this ).prop("__data__").value );
              }
       },   
    position: {my: 'center',  at: 'center'},
    style: {width: 75, classes: 'qtip-dark qtip-shadow'},
    show: { effect: function(offset) {$(this).fadeIn(500);}}        
});

（更新：这似乎是使qtip content 成为触发它的单个元素的函数的正确方法。）

如果这变得令人困惑，您可能需要查看 d3-tip 插件，它使用 d3 样式的 function(d,i){} 回调来根据元素数据和索引格式化工具提示。