个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 15:41:59 28 4
gpt4 key购买 nike

我试着用鼠标悬停画圆环图，我有以下代码，它运行良好。在这里，我必须在悬停圆弧时突出显示圆弧。

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

mouseover时如何高亮圆弧？是否可以突出弧线？

最佳答案

您可以使用“描边”属性

 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>

关于javascript - 如何在 d3.js 中鼠标悬停时突出显示圆弧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40652649/

28 4 0
文章推荐： javascript - RxJS5: .combineLatest() 有投影功能？
文章推荐： javascript - 如何在 Javascript 中暂停事件？
文章推荐： javascript - 从日期数组javascript中查找缺失的一天
文章推荐： javascript - webpack - 如何为生产环境和开发环境设置不同的变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com