如何在d3.js中创建饼图可视化，手动键入输入并实现平滑过渡

var data = [
  { name: "苹果", value: 20 },
  { name: "橙子", value: 30 },
  { name: "香蕉", value: 40 },
  { name: "梨子", value: 10 }
];

var width = 300;
var height = 300;

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var radius = 100;

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

var arcs = svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("d", d3.arc()
    .innerRadius(0)
    .outerRadius(radius)
  )
  .attr("fill", function(d, i) { return "hsl(" + i * 30 + ", 50%, 50%)"; })
  .transition()
  .duration(1000)
  .attrTween("d", function(d) {
    var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
    return function(t) {
      return d3.arc()
        .innerRadius(0)
        .outerRadius(radius)
        .cornerRadius(5)
        .padAngle(0.02)
        .padRadius(100)(interpolate(t));
    };
  });

var legend = svg.selectAll(".legend")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) { return "hsl(" + i * 30 + ", 50%, 50%)"; });

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d.name; });