javascript - 如何在 d3 中悬停时增加饼图的大小

我使用 d3 创建了饼图。如何在悬停时增加饼图的大小？如您所见，绿色部分太小了，所以我想像红色部分一样改变它的大小。我该怎么做？

我的代码:

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":5}];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
var arcOver = d3.svg.arc()
        .outerRadius(r + 9);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        console.log(arc(d));
        return arc(d);
    })
     .on("mouseenter", function(d) {
            d3.select(this)
               .attr("stroke","white")
               .transition()
               .duration(1000)
               .attr("d", arcOver)             
               .attr("stroke-width",6);
        })
        .on("mouseleave", function(d) {
            d3.select(this).transition()            
               .attr("d", arc)
               .attr("stroke","none");
        });;

js fiddle 中有示例:jsfiddle 谢谢。 pie chart

最佳答案

现在这是正确的代码。试试吧..好的

<!DOCTYPE html>
<html>

<head>
  <title>Dsnap - Charts</title>
</head>

<body>
  <div id="wrapper">

  </div>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var canvas = d3.select('#wrapper')
      .append('svg')
      .attr({
        'width': 650,
        'height': 500
      });

    var data = [{
      "label": "one",
      "value": 40
    }, {
      "label": "two",
      "value": 30
    }, {
      "label": "three",
      "value": 30
    }];

    var colors = ['red', 'blue'];

    var colorscale = d3.scale.linear().domain([0, data.length]).range(colors);

    var arc = d3.svg.arc()
      .innerRadius(0)
      .outerRadius(100);

    var arcOver = d3.svg.arc()
      .innerRadius(0)
      .outerRadius(150 + 10);

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


    var renderarcs = canvas.append('g')
      .attr('transform', 'translate(440,200)')
      .selectAll('.arc')
      .data(pie(data))
      .enter()
      .append('g')
      .attr('class', "arc");

    renderarcs.append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return colorscale(i);
      })
      .on("mouseover", function(d) {
        d3.select(this).transition()
          .duration(1000)
          .attr("d", arcOver);
      })
      .on("mouseout", function(d) {
        d3.select(this).transition()
          .duration(1000)
          .attr("d", arc);
      });

    renderarcs.append('text')
      .attr('transform', function(d) {
        var c = arc.centroid(d);
        console.log(c);
        return "translate(" + c[0] + "," + c[1] + ")";
      })
      .text(function(d) {
        return d.value + "%";
      });
  </script>
</body>

</html>

关于javascript - 如何在 d3 中悬停时增加饼图的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30816709/

javascript - 如何在 d3 中悬停时增加饼图的大小

上一篇：javascript - 你如何在 JavaScript 中转换为半 float ？

下一篇：javascript - 如何在 React 中附加到 dom？