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

鼠标悬停

我希望它放大它的outerRadius。这就是我所拥有的：

    $(".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。

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

d3.js不能改变弧的外半径

2 个答案: