无法在 d3 应用程序中的文本标记上添加 Bootstrap 弹出框

Question

此代码段的目的是在单击某个词时打开一个带有图表的弹出窗口。该图表仍未包含在弹出窗口中，但我将一步一个脚印。

var childText = svg.selectAll("childText")
        .data(...)
        .enter().append("text")
        .attr("class", "btn btn-lg btn-danger")
        .attr("x", "...")
        .attr("y", "...")
        .attr("font-size", "...")
        .attr("fill", "...")
        .attr("role", "button")
        .attr("data-content", "it works!")
        .attr("data-trigger", "focus")
        .attr("data-toggle", "popover")
        .attr("title", "graph")
        .attr("data-content", "yi boi")
        .attr("tabindex", "0")
        .text("...")

$(document).ready(function () {
    $('[data-trigger="focus"]').popover({'show':true});
});

HTML 可以正常工作而不会引发任何错误，但是当我单击该词时，没有任何反应。当我单击该词时，我注意到在元素内部生成了一个特定属性 (aria-describedby="popover900071")。这是唯一发生的变化，没有弹出窗口或错误出现。

使用的版本：

Bootstrap: 3.3.7

d3: 3.5.0

（使用的其他库）c3：0.4.11，jQuery：3.1.1

Bootstrap 弹出窗口文档：http://getbootstrap.com/javascript/#popovers

TL;DR：尝试在 d3 应用程序中使用来自 Bootstrap 的弹出窗口，弹出窗口未出现且未生成错误。

Answer 1

我不是 100% 确定 bootstrap 集成，但如果您正在寻找类似的东西，您可以使用下面的工具提示示例。它的功能与弹出窗口完全相同，您可以随时更改我提供的 CSS，使其看起来更类似于 bootstrap。我个人认为 mouseover 和 mouseout 比单击更方便用户使用，但您始终可以非常简单地更改该部分。

sunburst example with tooltip

首先包含以下脚本标签：

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

创建以下 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: "BC";
  position: absolute;
  text-align: center;
}

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

在您的 JS 文件中包含以下内容：

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "**value of string**";
  })

实例化 svg 变量后调用工具提示：

svg.call(tip);

最后，将以下内容添加到您要显示的元素中：

.on('mouseover', tip.show)
    .on('mouseout', tip.hide);

给你。

无法在 d3 应用程序中的文本标记上添加 Bootstrap 弹出框

Can't add a Bootstrap Popover on a text tag in d3 application

javascript

html

d3.js

popover

bootstrap-popover