使用qtip2工具提示與d3.js

我是一個d3.js newby和我正在與treemap example。原始示例在懸停在特定部分上時顯示工具提示。我想用工具提示代替。使用qtip2工具提示與d3.js

在d3.js示例以下行用於添加通過設置標題屬性，即一個默認提示：

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

的qtip2網站暗示（jQuery的）線

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

將替換qtip2變體的默認工具提示。但是，它並沒有出現在任何地方。這是我應該叫它的方式嗎？

我能夠通過添加類的矩形元素產生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值。我對d3.select（this），datum（）和__data__屬性有些熟悉，但我無法使其工作。 $（'rect.QTIP2'）。text（）行也產生了一些結果，但是，這給出了所有rects的值，而不僅僅是您懸停的值。

任何幫助，非常感謝！

來源

2014-03-04 Herman Sontrop

的$('[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){}回調來根據元素數據和索引格式化工具提示。

來源

2014-03-04 18:54:58 AmeliaBR

謝謝！我嘗試了你的建議，不幸的是它沒有工作:-(關於你的第一個建議，我應該使用像$（「rect：has（title）」）。qtip（）;？ –

應該選擇矩形，但是我認爲你應該跳過標題文本，如果你正在做自定義工具提示 - 或者使用d3添加標題作爲屬性，然後使用[content.title]（http://qtip2.com/options#content）。標題）來使你的工具提示查看更新後的代碼，瞭解應該如何直接抓取d3數據。 – AmeliaBR

謝謝！正確的工具提示內容現在可見！ –

使用qtip2工具提示與d3.js

回答

相關問題