d3.js无法更改弧形的外半径

Question

我在我的代码中有一些甜甜圈布局：

    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

- Sergey Scopin

---

你需要更改弧形生成器的半径，然后重新生成路径。参见例如此示例。 - Lars Kotthoff

现在进行了一些编辑，这也没有扩大半径。 - Sergey Scopin

让我再说一遍：你需要改变弧形生成器的半径并重新生成路径。你目前正在更改g元素的属性，正如你所观察到的，这根本没有任何效果。 - Lars Kotthoff

它找到了路径，但是出现了错误。 - Sergey Scopin

弧形生成器- 这个在你的代码中被称为 arc 的东西。 - Lars Kotthoff

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);});

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

请参见这个CodePen示例。

- MasterAM

---

我认为你需要在“on(click,toggleArc)”后面删除“;”。 - pstanton

Answer 2

使用过渡效果，我们可以做到这一点。

var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
.append("g")
.attr("transform", "translate(100,100)");
 var arc = d3.svg.arc()
.innerRadius(20)
.outerRadius(20)
.startAngle(0)
.endAngle(Math.PI);
 svg.append("path")
.attr("id", "arc1")
.attr("d", arc);
 arc.outerRadius(70);
 d3.select("#arc1").transition()
.duration(1000)
.attr("d", arc);

Fiddle

- user3501613