d3 mouseover tip.show 现在在函数中工作（a，b，c）答案

【问题标题】：d3 mouseover tip.show now working when in function(a, b, c)d3 mouseover tip.show 现在在函数中工作（a，b，c）
【发布时间】：2019-03-18 08:49:03
【问题描述】：

我有 d3 工具提示

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
  return '<strong>Value:</strong> <span class="d3-tip-value>' + d.value + '</span>';
});
svg.call(tip);

所以当鼠标悬停在路径上的点时，我在函数（a，b，b）中有更多代码，并且还有无法通过这种方式工作的tip.show方法：

svg.selectAll(".dot")
  .data(dataset)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("cx", function(d, i) { return xScale(new Date(d.y.date)) })
  .attr("cy", function(d) { return yScale(d.y.value) })
  .attr("r", 4)
  .on("mouseover", function(a, b, c) {
      tip.show; // NOT WORKING
      ......

但是tip.show 是这样工作的：

svg.selectAll(".dot")
  .data(dataset)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("cx", function(d, i) { return xScale(new Date(d.y.date)) })
  .attr("cy", function(d) { return yScale(d.y.value) })
  .attr("r", 4)
  .on("mouseover", tip.show) // WORKING

【问题讨论】：

试试tip.show(a, b, c)。

标签： d3.js tooltip mouseover

【解决方案1】：

使用：“d3 5.15.0”和“d3-tip 0.9.1”

.on('mouseover', function(d, i) {
                tip1.show(d, this), 
                d3.select(this).attr("fill", "red")
            })
.on('mouseout', function(d, i) {
                tip1.hide(d, this), 
                d3.select(this).attr("fill", "black")
            })

这对我来说非常有效。在 show() 函数中传递“d”和“this”并使用普通函数而不是新的箭头样式函数似乎可以将其保持在相关范围内。

【讨论】：