d3.js - d3 圆环图过渡变化

Question

另一个d3新手问题在这里。

我正在尝试使用分组嵌套数据转换更改圆环图。这就是我现在所拥有的。

http://bricbracs.com/test/

因此，当我单击像纽约这样的段弧时，它将使用来自 dept 列的数据和嵌套函数进行更新，所以我得到了这个。我很接近。我将数据分组。我需要帮助重新绘制甜甜圈。

http://bricbracs.com/test1/

这是一个csv文件。

    status,dept,city,points
    temp,finance,New York,33
    contract,HR,London,12
    contract,HR,New York,11
    casual,shop,London,43
    contract,shop,Paris,51
    temp,finance,London,7
    contract,office,New York,61
    contract,shop,London,31
    temp,office,New York,16
    contract,office,London,19
    temp,finance,London,7
    contract,office,New York,61
    contract,sales,London,31
    temp,finance,New York,16
    contract,sales,Paris,19

这是 d3 脚本。提前致谢。

<script>
  var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

   var color = d3.scale.category20();

   var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 70);

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

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
   svg.style("cursor","pointer")

d3.csv("data.csv", function(error, data) {
  var data = d3.nest()
    .key(function(d) {
      return d.city;
    })
    .rollup(function(d) {
      return d3.sum(d, function(g) {
        return g.points;
      });
    }).entries(data);
var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");
  g.append("path")
    .attr("d", arc)
   .attr("stroke", "white")
    .attr("stroke-width", 0.5)
    .style("fill", function(d) {
      return color(d.data.key);
    })
 .on("mouseover", function (d) {
    d3.select("#tooltip")
    .style("left", d3.event.pageX + "px")
    .style("top", d3.event.pageY + "px")
    .style("opacity", .75)
    .select("#value")
    .text(d.value.toLocaleString())
     document.getElementById("demo").innerHTML =d.data.key    
    })
   .on("mouseout", function () {
    d3.select("#tooltip")
   .style("opacity", 0);
   console.log("OUT")
 })
.on("mousemove", function () {
    d3.select("#tooltip")
    .style("left", (d3.event.pageX +20) + "px")
   .style("top", d3.event.pageY + "px+50")    
})

  .on("click", function() {       
    change()
    }); 

   g.append("text")
    .attr("transform", function(d) {
    var c = arc.centroid(d),
        x = c[0],
        y = c[1],l
        h = Math.sqrt(x*x + y*y);
      return "translate(" + arc.centroid(d) + ")";
    })
    //.attr("dy", "1em")
    .style("text-anchor", "middle")
    .text(function(d) {
      return d.data.key
    })

 function change() {
   var data = d3.nest()
    .key(function(d) {
      return d.dept;
        })
    .rollup(function(d) {
      return d3.sum(d, function(g) {
        return g.points;
      });
    }).entries(data);

 var path = svg.selectAll("path");
    path = path.data(pie(data), function(d) { return d.data.key; })
    path.enter().append("path").attr("fill", function(d) {return      color(d.data.key); })
  path.exit().remove()
  path.attr("d", arc)

  }

});