Question

我是d3.js newby，我正在使用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（）也产生了一些结果，但是，它给出了所有rects的值，而不仅仅是你悬停的值。

非常感谢任何帮助！

Answer 1

$('[title]').qtip();行无效，因为它正在寻找具有"title" 属性的元素（如HTML中），而不是寻找一个元素有一个子<title>元素（这是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){}回调来根据元素数据和索引格式化工具提示。

使用qtip2工具提示和d3.js

1 个答案: