Question

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

这是HTML页面的结构

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

我希望当我将鼠标悬停在任何圆圈上时，只有圆圈应显示转换。

这是我的代码无效。

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);

    }

请让我知道如何解决问题。

Answer 1

您的代码应如下所示。

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);
}

Answer 2

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

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()
  ⋮

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

2 个答案: