Javascript d3.js可以'；t改变弧的外半径

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

    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

---

如注释中所述，您可能应该使用弧生成器转换弧

添加一个

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

在本例中，我切换数据元素的状态，使其在普通表单和扩展表单之间切换

---

请参阅。

使用transition，我们可以做到这一点

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

---

您需要更改圆弧生成器的半径，然后重新生成路径。请参见，例如，现在进行了一些编辑，这也不会放大半径。让我再说一遍：您需要更改圆弧生成器的半径并重新生成路径。您当前正在更改

g

元素的一个属性，正如您所观察到的，该属性根本没有任何效果。它发现path ok，但给出了错误。arc生成器--代码中称为

arc

的东西。我想您需要删除“；”在“打开（单击，切换）”之后