如何传递在d3.js中调用javascript事件的同一对象

how to pass same object on which javascript event is called in d3.js

本文关键字：事件 对象 javascript 调用 何传递 d3 js      更新时间：2023-09-26

我正在使用d3.js，并使用它创建了svg，我在上面绘制了地图和圆。有许多圆圈，每个圆圈都有唯一的id，但属于同一类。现在，当我将鼠标悬停在它们上面时，我想通过调用oneevent函数来进行一些转换。

以下是HTML页面的结构

table
 tbody
  tr
    td
     svg
       rect  (boundary of canvass)
        g
         g
          path
          circle id(xyz)
         g
          path
          circle(pqr)

我希望当我悬停在任何一个圆圈上时，只有那个圆圈应该显示do过渡。

这是我的代码，它不起作用。

var radius=(weekData[q].bob[p].reach)/15;
    d3.select("body").select("svg").select("#outerG").append("g").append("circle")  
         .attr("cx",coords[0])
            .attr("cy",coords[1])
            .attr("r",radius)
            .attr("class","circle")
            .attr("id","xyz")
            .style('fill', 'tan')
            .attr("onmouseover","myHoverFunction(this)")
                        .attr("onmouseout","myHoverOutFunction(this)");

    function myHoverFunction(obj)
    {
    d3.select("this.obj").transition()
                        .duration(1000)
                        .attr("r",40)
                        .attr("stroke","red")
                        .attr("stroke-width",4);
    }

请告诉我怎样才能解决这个问题。

您的代码应该是这样的。

d3.select("body").select("svg").select("#outerG").append("g").append("circle")  
 .attr("cx",coords[0])
    .attr("cy",coords[1])
    .attr("r",radius)
    .attr("class","circle")
    .attr("id","xyz")
    .style('fill', 'tan')
    .on("mouseover", myHoverFunction);
function myHoverFunction() {
  d3.select(this).transition()
                .duration(1000)
                .attr("r",40)
                .attr("stroke","red")
                .attr("stroke-width",4);
}

我无法轻松测试它，但您可以尝试：

d3.select("#outerG")
  .append("g").append("circle")  
  .attr( {
    cx: coords[0],
    cy: coords[1],
    r: radius,
    class: 'circle',
    id: 'xyz'
  } )
  .style('fill', 'tan')
  .on("mouseover", myHoverFunction)
  .on("mouseout", myHoverOutFunction)
function myHoverFunction() {
  d3.select(this).transition()
  ⋮
相关文章：