d3.js thay đổi màu sắc và kích thước trên biểu đồ đường chấm trên di chuột

Question

Tôi đã tạo biểu đồ dạng đường với d3.js (xem hình ảnh đính kèm 1).

Tôi đã quản lý chèn chú giải công cụ vào các chấm biểu đồ khi di chuột qua. Tôi cũng muốn thay đổi màu sắc và kích thước của các chấm. Tôi đã thử nhiều cách nhưng dường như rất khó. Bất kỳ giúp đỡ? Dưới đây là đoạn mã:

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

Answer 1

Chỉ cần thiết lập màu sắc và kích thước trong xử lý:

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