javascript - d3.js 无法改变圆弧的外半径

Question

我的代码中有一些 donut 布局:

    var cityPercentage=[50,30,20,10];
    var width=300,
        height=300,
        radius=100;
    var color=d3.scale.linear()
                .domain([0,60])
                .range(["red","blue"]);
    var cityDivision = d3.select("#cities")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("class","span4");
    var group=cityDivision.append("g")
    .attr("transform","translate(" + width / 2 + "," + height / 2 + ")");
    var arc=d3.svg.arc()
        .innerRadius(radius-19)
        .outerRadius(radius);
    var pie= d3.layout.pie()
        .value(function(d){return d;});
var arcs=group.selectAll(".arc")
    .data(pie(cityPercentage))
    .enter()
    .append("g")
    .attr("class","arc")
    .attr("id",function(d){return d.data;});
    arcs.append("path")
    .attr("d",arc)
    .attr("fill",function(d){return color(d.data);});

在鼠标悬停时，我希望它放大它的外半径。 这是我所拥有的:

    $(".arc").on("mouseover",(function(){
    console.log($(this).find("path"));
    $(this).find("path").transition()
    .duration(10)
    .attr("outerRadius",radius+20);
}));

它说

Uncaught TypeError: undefined is not a function VM24:44
(anonymous function) VM24:44
jQuery.event.dispatch jquery.js:5095
elemData.handle

Answer 1

如评论中所述，您可能应该使用圆弧生成器来过渡圆弧。

添加一个onClick 监听器并创建另一种类型的圆弧，然后简单地转换路径的d 属性:

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

var arcLarge = d3.svg.arc()
  .innerRadius(radius-25)
  .outerRadius(radius + 10);

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

var toggleArc = function(p){
    p.state = !p.state;
    var dest = p.state ? arcLarge : arc;

    d3.select(this).select("path").transition()
      .duration(1000)
      .attr("d", dest);
};

var arcs = group.selectAll(".arc")
  .data(pie(cityPercentage))
  .enter()
  .append("g")
  .attr("class","arc")
  .attr("id",function(d){return d.data;})
  .on("click",toggleArc)
      .append("path")
  .attr("d",arc)
  .attr("fill",function(d){return color(d.data);});

在这个例子中，我切换了数据元素的状态，所以它在正常和扩展形式之间切换。

参见 this CodePen example .