D3.js 具有d3.tip的多个鼠标悬停事件

我正在尝试更改svg元素的笔划，该元素也调用了d3.tip

我的代码的相关部分如下所示：

    map.call(tip);

    map.on("mouseover", function(){ d3.select(this).style({stroke:"#7bd362"}); tip.show; });

    map.on("mouseout",tip.hide);

我可以让我的代码执行一个事件：在鼠标悬停时改变笔划，或者显示工具提示。但我不能让这两件事同时发生

---

以前有人成功使用过d3 tip和其他鼠标事件吗？

我最后需要将数据对象传递给tip.show（）函数

最终代码：

map.on("mouseover", function(d){ 
  tip.show(d); 
 })
 .on("mouseout", function(d){
  tip.hide(d);          
});

我没有尝试过，但这也可能有效：

map.on("mouseover", tip.show).on("mouseout", tip.hide);

---

对我来说，这件事奏效了

rect.filter(function(d) { return d in data; })
        .on("click", function(d){
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          var val = 0,id;
          for(var itr=0; itr<$rootScope.dom_elements.length; ++itr) {
             if(dom_element_to_append_to == $rootScope.dom_elements[itr].primary) {
                val = itr;
                break;
            }
        }
        monthInt = Math.floor(monthInt % 100);
        for (var itr = 0; itr<12; ++itr) {
           id = month[itr] + "" + varID;
           $('#' + id).css("z-index",0);
           $('#' + id).css("stroke","#000");
           $('#' + id).css("stroke-width", "2.5px");
       }
       id = month[monthInt-1] + "" + varID;
       currentPathId = id;
       $('#' + id).css("stroke","orange");
       $('#' + id).css("position","relative");
       $('#' + id).css("z-index",1000);
       $('#' + id).css("stroke-width", "4.5px");
       $rootScope.loadDayHourHeatGraph(year, monthInt , val, isCurrency);
   })
        .attr("fill", function(d) { return color(Math.sqrt(data[d] / Comparison_Type_Max )); })
        .on('mouseover', function(d) {

          tip.show(d);
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          monthInt = Math.floor(monthInt % 100);

          var id = month[monthInt-1] + "" + varID;
          if(id!=currentPathId) {
            $('#' + id).css("stroke","orange");
            $('#' + id).css("position","relative");
            $('#' + id).css("z-index",-1000);
            $('#' + id).css("stroke-width", "4.5px");
        }

    })
        .on('mouseout', function(d) {

          tip.hide(d);
          var year = d/10000;
          year = Math.floor(year);
          var monthInt = d/100;
          monthInt = Math.floor(monthInt % 100);

          var id = month[monthInt-1] + "" + varID;
          if(id != currentPathId) {
            $('#' + id).css("z-index",-1000);
            $('#' + id).css("stroke","#000");
            $('#' + id).css("stroke-width", "2.5px");
        }
    });

rect.filter（函数（d）{返回数据中的d；}）
.打开（“单击”，功能（d）{
风险年=d/10000；
年份=数学楼层（年份）；
var=d/100；
var=0，id；
对于（var itr=0；itrMy solution:

在
d3.tip（）.html
中使用额外的
mouseover
像这样吗

let tip = d3.tip().html(function(d) {
    // some extra 'mouseover' code ...
    // some html generating code ...
    return 'some_html_code'
});

svg.append('g')
    .selectAll("rect")
    .data(function(d) { return d }).enter()
        .append("rect")
        .on('mouseover', tip.show)
        .on('mouseout', function(d, i) {
            tip.hide();
            // some extra 'mouseout' code ...
        });

然后在主D3代码中执行
mouseout
操作，如下所示

let tip = d3.tip().html(function(d) {
    // some extra 'mouseover' code ...
    // some html generating code ...
    return 'some_html_code'
});

svg.append('g')
    .selectAll("rect")
    .data(function(d) { return d }).enter()
        .append("rect")
        .on('mouseover', tip.show)
        .on('mouseout', function(d, i) {
            tip.hide();
            // some extra 'mouseout' code ...
        });

这适用于最新版本的
d3.tip
，因为
tip.show
函数需要访问
This
，但是
tip.hide
函数实际上不使用任何参数。
如果您正在寻找使用d3 v6的解决方案（我使用的是6.4.0）

我也必须通过这个活动

这就是我的工作

.on("mouseover", function(e,d) { tip.show(e,d); })

链接到d3.tip-for-d3.v6:
您是否尝试过
tip.show（此）
？在
mouseover
处理程序中，显式调用
tip.show
。类似地，在
mouseout
处理程序中调用
tip.hide
。@Larskothoff那到底是什么样子？
this.tip.show
？不，
tip.show
，传递传递给处理程序函数的参数。看看这个，它确实是最新版本的d3.tip（）自由地使用了
这个
，这使得
.on（“mouseover”，tip.show）
是唯一不会给我带来错误的表单。