multiple piecharts

by jeffxiao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<svg id="test1" class="mypiechart"></svg>
<svg id="test2" class="mypiechart"></svg>
</div>

CSS

text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
            float: left;
            height: 350px !important;
            width: 350px !important;
        }
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

JavaScript

var testdata1 = [
        {key: "Alice", y: 5},
        {key: "Bob", y: 2},
        {key: "Charlie", y: 1}
    ];

    var height = 350;
    var width = 350;

    function genFoo(div) {
      var foo = function() {
          var chart = nv.models.pieChart()
              .x(function(d) { return d.key })
              .y(function(d) { return d.y })
              .width(width)
              .height(height)
              .showTooltipPercent(true);

          d3.select(div)
              .datum(testdata1)
              .transition().duration(1200)
              .attr('width', width)
              .attr('height', height)
              .call(chart);

          return chart;
    	}
      
      return foo;
    }


 //   nv.addGraph(genFoo("#test1"));
 //   nv.addGraph(genFoo("#test2"));
		  

 $(document).ready(function () {
    $svg = $("svg", {id: "test0", "class": "mypiechart"})
    // TODO append 9 svg, or 1 svg with 9 divs in it
    $("#container").append($svg);
    
    nv.addGraph(genFoo("#test0"));
});