CODEWITHSUNDEEP
javascriptd3.jscharts
xxxben
xxxben

Reputation: 41

How to implement on click function to D3 pie chart

I was using the example at this link to draw my pie chart: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html

I made two modification to the original code: 1 only three arcs are allowed

 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 I manually set the value for the arc

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;

The complete code is here:http://jsfiddle.net/jsXC5/ So far, so good. The desired function would be that if I click on one of the gold, a function is called and the value for the gold arc increase by 1000 while the values for silver and copper both decrease by 500.

I tried by doing:

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

But it does not work. Help please!

Upvotes: 1

Views: 3264

Answers (1)

xxxben
xxxben

Reputation: 41

just solved it. The onlick function should be added directly below .attr instead of .attrTween

Upvotes: 3

Related Questions