d3.js更改鼠标事件的圆半径[重复]答案

【问题标题】：d3.js change circle radius on mouse events [duplicate]d3.js更改鼠标事件的圆半径[重复]
【发布时间】：2021-01-11 21:03:49
【问题描述】：

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

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

这是绘制圆圈的部分。

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

这是可重现的小型演示： http://plnkr.co/edit/23etevpozYBTpXdH

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

查看您的代码，您正在像这样设置 r

.attr("r", 5)

但比你正在使用的

.attr({ r: 8 });

也许你需要使用这个

d3.select(this).attr("r", 8);

永远不要只使用 d3js

【讨论】：

【解决方案2】：

将handleMouseOver 和handeMouseOut 更改如下：

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

您不能仅使用 .attr 属性更改样式，您需要定义 transition() (docs)。

更新了 sn-p：Click here

【讨论】：