D3.js - .on（鼠标悬停）不检索数据（地图上的强制定向布局（leaflet.js））

Question

我正在通过地图 ( leaflet.js) 建立网络，其中有两种不同类型的圈子（私有域和公共域）。我可以在地图中显示我的links和我的nodes（nodes实体类型（私人或公共）以及links他们彼此签订的合同。

.on("mouseover")不幸的是，当我尝试将效果应用到我的圈子时遇到了问题。下面的代码展示了我具体做了什么效果。

var circle = g.selectAll("circle")

    .data(nodes)

    .enter()

    .append("circle")

    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })        

    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })

    .attr("r", function(d,i)

        {                

        if(d.numContr >= 50)                            {return 20;}

        else{

            if(d.numContr <50 && d.numContr >= 25)      {return 16;}

            else{

                if(d.numContr <25 && d.numContr >= 10)  {return 12;}

                else                                    {return 8; }

                }           

            }

        })

    .attr("fill", function (d, i)

        {

        if(d.private == 1)      { return "rgb(8,105,114)" }

        else                    { return "rgb(167,255,131)"}

        })

    .attr("stroke","rgb(7,26,82)")

    .attr("stroke-width", 6) 

    .on("mouseover", mouseover)

    .on("mouseout", mouseout)  

其function mouseover内容如下：

    function mouseover(d, i, n)

{

    console.log(d3.select(n[i])

    d3.select(n[i])

    .transition()

    .duration(100)

    .attr("opacity",0.7)

}

我现在面临的问题是，当我console.log()尝试查看什么属性或发送到 的值时，我什至看不到数据log，数据就是看不到。我尝试了一切可能的方法，我尝试将函数放入.on("mouseover", function(...){...})，随机尝试中，但似乎没有任何效果。提醒一下，我只有 2 周的时间d3.js，所以我仍然是一个尝试学习文档的菜鸟。我觉得奇怪的是，另一个functions正在工作并通过data，但当我指的是该mouseover功能时，它不起作用。

我将提供所有代码以供进一步分析，因为问题可能出在其他地方。

Answer 1

我们要做的就是attribute在名为 的圆圈中添加"pointer-events"并将其设置为visible。这是结果：.attr("pointer-events","visible")然后，我在调用函数mouseover和时遇到了一个较小的问题mouseout，所以我只是将其写在鼠标悬停事件上，如下所示，它起作用了：.on("mouseover",function (d, i, n)            {                d3.select(n[i])                .transition()                .duration(100)                .attr("opacity",0.7)            })    .on("mouseout",function (d, i, n)    {        d3.select(n[i])        .transition()        .duration(100)        .attr("opacity",1)    })     对 做了同样的事情function update。