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

刚解决了。应该在.attr而不是.attrTween

下面直接添加onclick函数

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

1 个答案: