Question

我想展示有关悬停现有svg元素的工具提示。

在live example中，绑定数据时将创建要悬停的元素。就我而言，这些元素已经存在于DOM中（圆圈）。所以我需要在selectedElms.enter()

之后选择它们

我的问题是如何在圈子上应用tip.show和tip.hide？

var data = [{
    train: 1
}, {
    train: 2
}, {
    train: 3
}, {
    train: 4
}]
var svg = d3.select('svg')
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        return "<strong>Frequency:</strong> <span style='color:red'>" + d.train + "</span>";
    })

svg.call(tip);

let selectedElms = d3.selectAll('circle').data(data, function(d) {
    if (d != undefined) {
        return d.train
    }
})
console.log('hi')
selectedElms.enter().on('mouseover', tip.show).on('mouseout', tip.hide)

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


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"
></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>


<svg height="400" width="500">
  <circle data='1' cx="100" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="1"  />
  <circle data='2' cx="200" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="2" />
  <circle data='3' cx="300" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="3"  />
  <circle data='4' cx="400" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="4"  />
</svg>

Answer 1

只有两件事需要纠正才能使其按预期工作：

就像我在answer中提到的关于您的第一个question一样，在将数据与DOM元素匹配时，键函数执行了两次。要将数据绑定到现有DOM元素，您必须使用Join existing elements of the DOM to data with d3.js中列出的技术。在您的情况下，关键功能变为
```
.data(data, function(d) {
  return (d && d.train) || this.id;
})
```
第一个表达式d && d.train检查d是否引用了实际值，如果为true，则返回其属性.train。在data参数中为每个数据执行键功能时就是这种情况。如果this.id是d，则有条件地对第二个表达式undefined求值，这是在为选定的元素（即已经存在的元素）执行键功能时的情况。如果找到匹配项，则将相应的基准面绑定到该元素。
您仅对更新DOM中已存在的元素感兴趣。因此，您根本不需要使用回车选择。由.data()返回的更新选择就足够了。您只需将呼叫打到.enter()。

看看下面的代码片段，看看它的效果：

var data = [{
    train: 1
}, {
    train: 2
}, {
    train: 3
}, {
    train: 4
}]
var svg = d3.select('svg')
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
        return "<strong>Frequency:</strong> <span style='color:red'>" + d.train + "</span>";
    })

svg.call(tip);

let selectedElms = d3.selectAll('circle')
  .data(data, function(d) {
    return (d && d.train) || this.id;
  })

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

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

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


<svg height="400" width="500">
  <circle data='1' cx="100" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="1"  />
  <circle data='2' cx="200" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="2" />
  <circle data='3' cx="300" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="3"  />
  <circle data='4' cx="400" cy="110" r="40" stroke="black" stroke-width="3" fill="red" id="4"  />
</svg>

使用d3-tip.js在悬停上显示工具提示

1 个答案: