將Twitter Bootstrap popover與D3.js集成

Question

我想在D3.js上使用Twitter Bootstrap工具提示。 這是我嘗試與D3集成的工具提示示例：

http://jsfiddle.net/kaZK5/1/

作為一個最小的工作示例，我正在嘗試在某些文本上使用此工具提示：

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

不幸的是，工具提示不適用於我的文字。 如何讓這個工具提示與D3一起使用？

Answer 1

您不能將html放在svg text元素中，但可以使用foreignObject元素執行此操作。

我沒有測試過這個，但這樣的事情應該有效：

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 。

Answer 2

看看這個小提琴 。

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

顯示使用d3-tooltip 。

首先，這是d3-tooltip的link 。

加載d3后加載此js文件。

這是d3-tooltip的功能。

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

然后在創建svg元素后調用tooltip函數。

像這樣 -

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;
}

希望這可以幫助 ：）