Could not update this properly...

http://stackoverflow.com/questions/22277196/how-to-update-multiple-pie-charts-in-one-page-in-d3/22281656?noredirect=1#comment33853726_22281656

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="chart" id="c1"></div>
<div class="chart" id="c2"></div>
<div class="chart" id="c3"></div>
<input type="button" value="update" id="update" />

CSS

.chart {
    margin: 10px;
    border: 1px solid;
    height: 100px;
    width: 300px;
}

JavaScript

var data1 = [30, 40, 50],
    data2 = [20, 50, 10],
    data3 = [10, 10, 10],
    data4 = [30, 50, 90],
    data5 = [30, 10, 20],
    data6 = [10, 60, 20],
    t = ["yes", "no", "dont know"];

var pwidth = $('.chart').width() - 20,
    pheight = $('.chart').height() - 10,
    radius = pheight / 2,
    outerRadius = radius,
    innerRadius = 10;
    
    var color = d3.scale.category10();
    
    var pie = d3.layout.pie().sort(null);
    
    var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);

var createPie = function (div, p, t) {
    var psvg = d3.select(div)
        .append("svg")
        .attr("width", pwidth)
        .attr("height", pheight)
        .attr("class", "p");
    
    var arcs = psvg.selectAll("g.arc")
        .data(pie(p))
        .enter()
        .append("g")
        .attr("class", "arc")
        .attr("transform", "translate(" + radius + "," + radius + ")");
    
    var paths = arcs.append("path")
        .attr("fill", function (d, i) {
                return color(i);
            })
        .attr("d", arc);
    
    arcs.append("text")
        .attr("transform", function (d) {
            d.innerRadius = radius;
                return "translate(" + arc.centroid(d) + ")";
            })
        .attr("text-anchor", "middle")
            .text(function (d) {
                return d.value;
            })
        .style("fill", "#fff");
    
    var legend = psvg.append("g")
        .attr("class", "legend")
        .attr("height", 100)
        .attr("width", 100)
        .attr('transform', 'translate(-60,10)');
    
    legend.selectAll('rect')
        .data(p)
        .enter()
        .append("rect")
        .attr("x", pwidth - 65)
        .attr("y", function (d, i) {
                return i * 20;
            })
        .attr("width", 10)
        .attr("height", 10)
        .style("fill", function (d, i) {
                return color(i);
            });
    
    legend.selectAll('text')
       ...