d3.js更改鼠标事件时的圆半径 [英] d3.js change circle radius on mouse events

问题描述

我在d3.js v5中绘制了一些圈子。我可以按预期将鼠标移到事件上，并且可以将内容记录到控制台，一切看起来都不错。唯一不起作用的部分是当我尝试将半径设置为更大时。半径大小没有变化。

 函数handleMouseOver（d，i）{
 console.log（ over， d，i）; 
 console.log（ this，this）
 d3.select（this）.attr（{
 r：8 
}）; 
} 
 
函数handleMouseOut（d，i）{
 console.log（ out，d，i）; 
 d3.select（this）.attr（{
 r：4 
}）; 
} 
  

此处是绘制圆圈的部分。

  linesAndDots 
 .selectAll（。data-circle）
 .data（d => d.values）
 .enter（）
 .append（圈）
 .attr（类，数据圈）
 .attr（ r，5）
 .attr （ cx，函数（d）{
 return xScale（d.date）; 
}）
 .attr（ cy，函数（d）{
 return yScale（d.measurement）
}）
 .on（ mouseover，handleMouseOver）
 .on（ mouseout，handleMouseOut）; 
  

这是可复制的小型演示：

解决方案

更改 handleMouseOver 和 handeMouseOut 如下：

 函数handleMouseOver（d，i）{
 d3.select（this）.transition（） 
 .duration（1）
 .attr（ r，20）; 
} 
 
函数handleMouseOut（d，i）{
 d3.select（this）.transition（）
 .duration（1）
 .attr （ r，4）； 
} 
  

您不能仅使用 .attr来更改样式属性，则需要定义 transition（）（文档）。

更新的代码段：点击此处

I have circles that I've drawn in d3.js v5. I'm getting the mouse over events as expected, and I can log stuff to the console and everything looks right. The only part that isn't working is when I try and set the radius to be larger. The radius size isn't changing.

function handleMouseOver(d, i) {   
    console.log("over ", d, i);
    console.log("this", this)
    d3.select(this).attr({
        r: 8
    });
}

function handleMouseOut(d, i) {   
    console.log("out ", d, i);
    d3.select(this).attr({
        r: 4
    });
}

Here is the part where the circles are drawn.

linesAndDots
    .selectAll(".data-circle")
    .data(d=>d.values)
    .enter()
    .append("circle")
    .attr("class", "data-circle")
    .attr("r", 5)
    .attr("cx", function(d) {
      return xScale(d.date);
        })
    .attr("cy", function(d) {
      return yScale(d.measurement)
     })
     .on("mouseover", handleMouseOver)
     .on("mouseout", handleMouseOut);

Here is the small reproducible demo: http://plnkr.co/edit/23etevpozYBTpXdH

解决方案

Change the handleMouseOver and handeMouseOut as following:

function handleMouseOver(d, i) {       
    d3.select(this).transition()
        .duration(1)
        .attr("r", 20);
}

function handleMouseOut(d, i) {   
    d3.select(this).transition()
        .duration(1)
        .attr("r", 4);
}

You can't change the styling using just the .attr attribute, you'll need to define a transition() (docs).

Updated snippet: Click here

这篇关于d3.js更改鼠标事件时的圆半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！