如何在鼠標懸停在d3.js時突出顯示圓弧

我試圖用鼠標懸停繪製圓環圖，我有以下代碼，它運行良好，在這裏，我必須在懸停圓弧時突出顯示圓弧。如何在鼠標懸停在d3.js時突出顯示圓弧

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Donet chart using d3.js</title> 
 
    <style> 
 
    .tooltip{ 
 
    position: absolute; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 50px; 
 
     padding: 2px; 
 
     font: 12px sans-serif; 
 
     background: black; 
 
     border: 0px;   
 
     border-radius: 8px; 
 
     color:white; 
 
     box-shadow: -3px 3px 15px #888888; 
 
     opacity:0; 
 

 
    } 
 
    </style> 
 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script> 
 
</head> 
 
<body> 
 
    <div id = "svgContent"></div> 
 
    <script> 
 
    var data = [{"Stage":"Level1","Value":5165, "Rate":1.25}, 
 
      {"Stage":"Level2","Value":2523, "Rate":9.54}, 
 
      {"Stage":"Level3","Value":4435, "Rate":21.25}, 
 
      {"Stage":"Level4","Value":1234, "Rate":7.25}, 
 
      {"Stage":"Level5","Value":6546, "Rate":1.3}]; 
 

 
    var totalValue = 0; 
 
    for (var i = 0; i<data.length;i++) 
 
     totalValue+=data[i].Rate; 
 
    totalValue=totalValue/5 
 
    width = 250; // Changes pie size as a whole 
 
    height = 250; // Changes pie size as a whole 
 
    radius = Math.min(width-10,height-10)/2; 
 

 
    var color = d3.scale.category20(); 
 
    
 
    var arc = d3.svg.arc() 
 
     .outerRadius(radius -50) 
 
     .innerRadius(radius - 10); //Changes width of the slices of the pie 
 

 
    var arcOver = d3.svg.arc() 
 
     .outerRadius(radius +50) 
 
     .innerRadius(0); 
 

 
    var svg = d3.select("#svgContent").append("svg") 
 
     .attr("width",width) 
 
     .attr("height",height) 
 
     .append("g") 
 
     .attr("transform","translate("+width/2+","+height/2+")"); 
 
     div = d3.select("body") 
 
     .append("div") 
 
     .attr("class", "tooltip"); 
 

 
    var pie = d3.layout.pie() 
 
      .sort(null) 
 
      .value(function(d){return d.Value;}); 
 

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(data)) 
 
     .enter() 
 
     .append("g") 
 
     .attr("class","arc") 
 
     .on("mousemove",function(d){ 
 
      var mouseVal = d3.mouse(this); 
 
      div.style("display","none"); 
 
      div 
 
      .html("Stage:"+d.data.Stage+"</br>"+"Value:"+d.data.Value+"</br>"+"Rate:"+d.data.Rate) 
 
      .style("left", (d3.event.pageX+12) + "px") 
 
      .style("top", (d3.event.pageY-10) + "px") 
 
      .style("opacity", 1) 
 
      .style("display","block"); 
 

 
     var selectthegraphs = $('.arc').not(this); 
 

 
     d3.selectAll(selectthegraphs) 
 
         .style("opacity",.5); 
 
     }) 
 
     .on("mouseout",function(){ 
 
      div.html(" ").style("display","none"); 
 

 
      var selectthegraphs = $('.arc').not(this); 
 
      d3.selectAll(selectthegraphs) 
 
         .style("opacity",1);   
 
     }); 
 

 
    svg.selectAll("text").data(pie(data)).enter() 
 
    .append("text") 
 
    .attr("class","label1") 
 
    .attr("transform", function(d) { 
 
     var dist=radius-120; 
 
     var winkel=(d.startAngle+d.endAngle)/2; 
 
     var x=dist*Math.sin(winkel)-4; 
 
     var y=-dist*Math.cos(winkel)-4; 
 
     
 
     return "translate(" + x + "," + y + ")"; 
 
    }) 
 
    .attr("dy", "0.35em") 
 
    .attr("text-anchor", "middle") 
 
    
 
    .text(function(d){ 
 
     return (d3.format(',.2f')(totalValue)+"%"); 
 
    } 
 
    ); 
 
    g.append("path") 
 
     .attr("d",arc) 
 
     .style("fill",function(d){return color(d.data.Stage);}); 
 

 
    </script> 
 
</body> 
 
</html>

如何突出弧形當我們將鼠標放置？是否可以突出顯示弧線？

來源

2016-11-17 Sai Rajesh

您可以使用「中風」的屬性

d3.select(this).style("stroke", "black");

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Donet chart using d3.js</title> 
 
    <style> 
 
    .tooltip{ 
 
    position: absolute; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 50px; 
 
     padding: 2px; 
 
     font: 12px sans-serif; 
 
     background: black; 
 
     border: 0px;   
 
     border-radius: 8px; 
 
     color:white; 
 
     box-shadow: -3px 3px 15px #888888; 
 
     opacity:0; 
 

 
    } 
 
    </style> 
 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script> 
 
</head> 
 
<body> 
 
    <div id = "svgContent"></div> 
 
    <script> 
 
    var data = [{"Stage":"Level1","Value":5165, "Rate":1.25}, 
 
      {"Stage":"Level2","Value":2523, "Rate":9.54}, 
 
      {"Stage":"Level3","Value":4435, "Rate":21.25}, 
 
      {"Stage":"Level4","Value":1234, "Rate":7.25}, 
 
      {"Stage":"Level5","Value":6546, "Rate":1.3}]; 
 

 
    var totalValue = 0; 
 
    for (var i = 0; i<data.length;i++) 
 
     totalValue+=data[i].Rate; 
 
    totalValue=totalValue/5 
 
    width = 250; // Changes pie size as a whole 
 
    height = 250; // Changes pie size as a whole 
 
    radius = Math.min(width-10,height-10)/2; 
 

 
    var color = d3.scale.category20(); 
 
    
 
    var arc = d3.svg.arc() 
 
     .outerRadius(radius -50) 
 
     .innerRadius(radius - 10); //Changes width of the slices of the pie 
 

 
    var arcOver = d3.svg.arc() 
 
     .outerRadius(radius +50) 
 
     .innerRadius(0); 
 

 
    var svg = d3.select("#svgContent").append("svg") 
 
     .attr("width",width) 
 
     .attr("height",height) 
 
     .append("g") 
 
     .attr("transform","translate("+width/2+","+height/2+")"); 
 
     div = d3.select("body") 
 
     .append("div") 
 
     .attr("class", "tooltip"); 
 

 
    var pie = d3.layout.pie() 
 
      .sort(null) 
 
      .value(function(d){return d.Value;}); 
 

 
    var g = svg.selectAll(".arc") 
 
     .data(pie(data)) 
 
     .enter() 
 
     .append("g") 
 
     .attr("class","arc") 
 
     .on("mousemove",function(d){ 
 
      var mouseVal = d3.mouse(this); 
 
      div.style("display","none"); 
 
      div 
 
      .html("Stage:"+d.data.Stage+"</br>"+"Value:"+d.data.Value+"</br>"+"Rate:"+d.data.Rate) 
 
      .style("left", (d3.event.pageX+12) + "px") 
 
      .style("top", (d3.event.pageY-10) + "px") 
 
      .style("opacity", 1) 
 
      .style("display","block"); 
 

 
     var selectthegraphs = $('.arc').not(this); 
 

 
     d3.selectAll(selectthegraphs) 
 
         .style("opacity",.5); 
 

 
     d3.select(this).style("stroke", "black"); 
 
     }) 
 
     .on("mouseout",function(){ 
 
      div.html(" ").style("display","none"); 
 

 
      var selectthegraphs = $('.arc').not(this); 
 
      d3.selectAll(selectthegraphs) 
 
         .style("opacity",1); 
 
d3.select(this).style("stroke", "none");   
 
     }); 
 

 
    svg.selectAll("text").data(pie(data)).enter() 
 
    .append("text") 
 
    .attr("class","label1") 
 
    .attr("transform", function(d) { 
 
     var dist=radius-120; 
 
     var winkel=(d.startAngle+d.endAngle)/2; 
 
     var x=dist*Math.sin(winkel)-4; 
 
     var y=-dist*Math.cos(winkel)-4; 
 
     
 
     return "translate(" + x + "," + y + ")"; 
 
    }) 
 
    .attr("dy", "0.35em") 
 
    .attr("text-anchor", "middle") 
 
    
 
    .text(function(d){ 
 
     return (d3.format(',.2f')(totalValue)+"%"); 
 
    } 
 
    ); 
 
    g.append("path") 
 
     .attr("d",arc) 
 
     .style("fill",function(d){return color(d.data.Stage);}); 
 

 
    </script> 
 
</body> 
 
</html>

來源

2016-11-17 13:00:33

試試下面的CSS：

.arc:hover path { 
    fill: red !important; 
    stroke: red; 
}

如果你不想使用!important那麼不設置內嵌fill風格。

來源

2016-11-17 11:38:31 Ashitaka

我不得不獨秀 –

特定弧的陰影有沒有簡單的方法來在SVG添加陰影，你爲此需要使用SVG過濾器。 – Ashitaka

如何在鼠標懸停在d3.js時突出顯示圓弧

回答

相關問題