javascript - d3.js在鼠标悬停时更改折线图点的颜色和大小

我使用d3.js制作了一个折线图(请参见附件图像1)。

鼠标悬停时，我设法在图点上插入工具提示。
我也想更改点的颜色和大小。我尝试了很多方法，但看起来确实很困难。有什么帮助吗？
这是一段代码:

  svg.selectAll("dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 5.5)
    .style("fill", "#fff8ee")
       .style("opacity", .8)      // set the element opacity
.style("stroke", "#f93")    // set the line colour
 .style("stroke-width", 3.5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); })
    .on("mouseover", function(d) {

        div.transition()
            .duration(70)
            .style("opacity", .7)

             ;
        div .html(formatTime(d.date) + "<br/>"  + d.close)
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
        })
    .on("mouseout", function(d) {
        div.transition()
            .duration(200)
            .style("opacity", 0);
    });

最佳答案

只需在处理程序中设置颜色和大小即可:

.on("mouseover", function(d) {
  d3.select(this).attr("r", 10).style("fill", "red");
})
.on("mouseout", function(d) {
  d3.select(this).attr("r", 5.5).style("fill", "#fff8ee");
});