Question

我正在尝试将鼠标悬停工具提示添加到d3 v4树中的节点。我在这里遵循此d3 v3示例：http://bl.ocks.org/jebeck/10699411

在该示例中，我看到以下代码：

.on('mouseover', function() {
                    var fo = svg.append('foreignObject')
                        .attr({
                            'x': anchor.w - tip.w,
                            'y': anchor.h + tip.h,
                            'width': foWidth,
                            'class': 'svg-tooltip'
                        });
                    var div = fo.append('xhtml:div')
                        .append('div')
                        .attr({
                            'class': 'tooltip'
                        });
   ...

我相信我在代码中也是如此：

      .on('mouseover', function (d) {
        var foHeight = 100;
        var foWidth = 100;
        var t = 50, k = 15;
        var tip = {'w': (3/4 * t), 'h': k};
        var anchor = {'w': 100/3, 'h': 100/3};

        var fo = svg.append('foreignObject')
          .attr('x', 0)
          .attr('y', 0)
          .attr('width', this.rect_width)
          .attr('height', this.rect_height)
          .attr('class', 'svg-tooltip');

        var div = fo.append('xhtml:div')
           .append('div')
           .attr({'class': 'tooltip'});
   ...

但是在我的代码中，div是null。我非常确定这是由于.attr({'class': 'tooltip'})行引起的，但是我不明白为什么添加行.attr({'class': 'tooltip'})会导致div为null。如果我删除行.attr({'class': 'tooltip'})，则div不是null，但是当我将鼠标悬停在节点上时，我的工具提示不会显示。

我的css文件中有这个：

.d3-chart {
  width: 100%;
  min-height:600px;
}

.wordwrap {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* Opera <7 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE */
}

.svg-tooltip {
  pointer-events: none;
}

.tooltip {
  padding: 10px;
  color: #4A22FF;
}

Answer 1

该参考文献使用d3v3，它允许将对象传递到.attr()和.style()，以表示多个（在这种情况下为单个）属性或样式。

selection.attr("property","value")

相当于：

selection.attr({property:"value"})

自d3v4起（包括d3v4），仅第一个选项有效。

在v3中可以看到：

d3.select("body")
  .append("p")
  .attr("class","underline")
  .text("Underlined");

d3.select("body")
  .append("p")
  .attr({"class":"underline"})
  .text("Underlined too");
  
d3.select("body")
  .append("p")
  .attr({"class":"underline","style":"color:blue"})
  .text("Underlined and blue");
  
// Classes can also be assigned 
d3.select("body")
  .append("p")
  .attr({"class":"underline"})
  .classed("small",true)  // with selection.classed
  .text("Underlined and small");

.underline {
  text-decoration: underline;
}
.small {
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

从d3v4开始，selection.attr()和selection.style()不再接受对象（如果使用d3-multi-selection，则.attrs（）和.styles（）会）< / p>

在这里看到

d3.select("body")
  .append("p")
  .attr("class","underline")
  .text("Underlined");
  
d3.select("body")
  .append("p")
  .classed("underline",true)
  .text("Underlined");  
  
d3.select("body")
  .append("p")
  .attr({"class":"underline"})
  .text("Underlined");

.underline {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>

您的工具提示可以使用以下方法获得所需的类，而不是使用对象来分配类：

div.classed("tooltip",true)
div.attr("class","tooltip") // will remove previously assigned classes

如果将selection.attr({property:"value"})与d3v4一起使用，则会导致错误，并且链接的内容均不会触发，因此div的html将为空-您永远不会执行填充div的代码。

无法在我的d3树节点中添加工具提示

1 个答案: