將Twitter Bootstrap popover與D3.js集成

我想在D3.js中使用Twitter Bootstrap工具提示。下面是我想要與D3整合工具提示的例子：將Twitter Bootstrap popover與D3.js集成

作爲最小的工作示例，我試圖用這個工具提示上一些文字：

svg.append('text') 
    .attr('x', 100) 
    .attr('y', 100) 
    .attr('class', 'pop-div') 
    .html('<a href="#" class="myid" rel="popover" >click me</a>')

不幸的是，工具提示不適用於我的文本。我怎樣才能讓這個工具提示與D3一起工作？

來源

2014-02-23 turtle

您不能將html放入元素中，但可以使用foreignObject element來執行此操作。

我沒有測試過這一點，但這樣的事情應該工作：

svg.append('svg:foreignObject') 
    .attr('width', ...) 
    .attr('height', ...) 
    .append('xhtml:div') 
    .attr('class', 'pop-div') 
    .html('<a href="#" class="myid" rel="popover" >click me</a>')

然而，IE不支持foreignObject，所以你可能要以不同的方式解決這個問題，例如通過不將工具提示放入svg中，而是放在html層中。我在d3.js項目中使用d3-tip。

來源

2014-02-23 23:20:47 nilsand

感謝您的幫助。我試過你的解決方案，但它似乎沒有工作。我沒有看到任何文字。我看到d3-tip，但無法弄清楚如何實現滾動工具提示。 – turtle

創建一個jsfiddle，我會看看，並使其工作:) – nilsand

好的，謝謝。這是我第一次使用jsfiddle，所以我試圖從這裏開始：http://jsfiddle.net/E4hXh/ – turtle

看看這個Fiddle。

使用此link創建了這個小提琴。

顯示使用d3-tooltip。

首先，這裏的link爲d3-tooltip。

d3加載後加載此js文件。

以下是d3-tooltip的功能。

 
var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d) { 
    return "Frequency: " + d.frequency + ""; 
    })

然後調用工具提示函數svg創建元素。

這樣的 -

 
svg.call(tip);

注：svg是在d3即，曲線圖的容器中定義的變量。

你走了。清潔和漂亮的工具提示，可以很容易地使用這樣的css定製。

 
.d3-tip { 
    line-height: 1; 
    font-weight: bold; 
    padding: 12px; 
    background: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    border-radius: 2px; 
} 

/* Creates a small triangle extender for the tooltip */ 
.d3-tip:after { 
    box-sizing: border-box; 
    display: inline; 
    font-size: 10px; 
    width: 100%; 
    line-height: 1; 
    color: rgba(0, 0, 0, 0.8); 
    content: "\25BC"; 
    position: absolute; 
    text-align: center; 
} 

/* Style northward tooltips differently */ 
.d3-tip.n:after { 
    margin: -1px 0 0 0; 
    top: 100%; 
    left: 0; 
}

希望這有助於:)

來源

2014-02-24 04:11:10

將Twitter Bootstrap popover與D3.js集成

回答

相關問題