web-dev-qa-db-ja.com

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);   
    });
javascriptjqueryd3.jsdata-visualization
13
andriatz

ハンドラーで色とサイズを設定するだけです：

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

理由はわかりませんが、d3.select(this)は以前は機能していましたが、機能しなくなりました。今はd3.select(event.currentTarget)を使用しています。

したがって、svgをグラフと見なし、そのすべての円をデフォルトで赤にすると、mouseoverで円の色を緑に変更し、mouseoutは次のようになります：

svg.on("mouseover", function(d){
d3.select(event.currentTarget)
.style("fill", "green");
})
.on("mouseout", function(d){
d3.select(event.currentTarget)
.style("fill", "red");
});
0
amunnelly