如何在D3饼图中实现点击功能

Question

我使用这个链接上的示例来绘制我的饼图：http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html

我对原始代码做了两处修改:1只允许三个弧线

 function update() {
            arraySize = 3;// it is total number of sectors
            streakerDataAdded = d3.range(arraySize).map(fillArray); // value is fed into streakerDataAdded

        oldPieData = filteredPieData;
        pieData = donut(streakerDataAdded);//piedata is donut and value fed into

2我手动设置了圆弧的值

var totalOctets = 0;
    filteredPieData = pieData.filter(filterData);

    filteredPieData[0].value=4000;
    filteredPieData[1].value=8000;
    filteredPieData[2].value=16000;
    totalOctets=filteredPieData[0].value+filteredPieData[1].value+filteredPieData[2].value;
    filteredPieData[0].name="Silver";
    filteredPieData[1].name="Gold";
    filteredPieData[2].name="Copper";

    //angle
    filteredPieData[0].startAngle=0;
    filteredPieData[0].endAngle=filtere

dPieData[0].value/totalOctets*2*Math.PI;
        filteredPieData[1].startAngle=filteredPieData[0].endAngle;
        filteredPieData[1].endAngle=filteredPieData[1].startAngle+filteredPieData[1].value/totalOctets*2*Math.PI;
        filteredPieData[2].startAngle=filteredPieData[1].endAngle;
        filteredPieData[2].endAngle=filteredPieData[2].startAngle+filteredPieData[2].value/totalOctets*2*Math.PI;

完整的代码在这里：http://jsfiddle.net/jsXC5/到目前为止还不错。所需的函数将是，如果我单击其中一个黄金，将调用一个函数，黄金的值增加1000，而银和铜的值都减少500。

我试着这样做：

paths = arc_group.selectAll("path").data(filteredPieData);
            paths.enter().append("svg:path")
                .attr("stroke", "white")
                .attr("stroke-width", 0.5)
                .attr("fill", function(d, i) { return color(i); })
                .transition()
                .duration(tweenDuration)
                .attrTween("d", pieTween)
                .on("click", function(d,i){
                  filteredPieData[1].value=filteredPieData[1].value+1000;
                  filteredPieData[0].value=filteredPieData[0].value-500;
                  filteredPieData[2].value=filteredPieData[2].value-500;
});

但它不起作用。请帮帮我！

Answer 1

就这么解决了。onlick函数应该直接添加到.attr下面，而不是.attrTween下面