Question

我尝试用鼠标悬停绘制圆环图，我有以下代码，它工作得很好。，在这里，我必须在悬停弧线时突出显示弧线。

<!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>

鼠标悬停时如何突出显示弧线？是否可以突出弧线？

Answer 1

你可以使用＆＃34; stroke＆＃34;特性

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

＆＃13;

<!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>

＆＃13;

Answer 2

尝试以下CSS：

!important

如果您不想使用fill，请不要设置内联public static void main(String[] args) { int length = 10000; int[] input = new int[length]; int j = length; for (int i = 0; i < length; i++) { input[i] = j; j --; } Datastruct Test = new Datastruct(); Test.sort(input); System.out.println("S = " + Test.S); System.out.println("T = " + Test.T); Test.sort_back(); System.out.println("Sorted Array: " + Test.S); } static class Datastruct{ Stack<Integer> S; Stack<Integer> T; public Datastruct(){ this.S = new Stack<Integer>(); this.T = new Stack<Integer>(); } public void sort_back() { while(! T.isEmpty()){ S.push(T.pop()); } } public void sort(int[] input) { for (int i = 0; i < input.length; i++) { if (S.isEmpty() && T.isEmpty()) { S.push(input[i]); }else if (!S.isEmpty() && S.peek() <= input[i]) { S.push(input[i]); } else { while(!S.isEmpty() && S.peek() > input[i] ){ T.push(S.pop()); } S.push(input[i]); } int tmp = S.pop(); while(!S.isEmpty() && !T.isEmpty() && tmp > T.peek()){ S.push(T.pop()); } S.push(tmp); } } }样式。

如何在d3.js中鼠标悬停时突出显示圆弧

2 个答案: