Question

我想在D3.js中使用Twitter Bootstrap工具提示。这是我尝试与D3集成的工具提示示例：

作为一个最小的工作示例，我正在尝试在某些文本上使用此工具提示：

  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 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。

Answer 2

看看这个Fiddle。

使用此link创建此小提琴。

显示使用d3-tooltip。

首先，这是d3-tooltip的{{3}}。

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

希望这会有所帮助：）

将Twitter Bootstrap popover与D3.js集成

2 个答案: