robby1066 · March 12, 2012 20:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>

  </head>
  <body>
    <script type="text/javascript">

    var width = 300;
    var height = width;
    var radius = width/2;
    color = d3.scale.category20c();     //builtin range of colors

    data = [{"label":"one", "value":11402}, 
            {"label":"two", "value":3059}, 
            {"label":"three", "value":47185},
            {"label":"four", "value":61554},
            {"label":"five", "value":169428}];
    
    data2 = [{"label":"one", "value":55555}, 
            {"label":"two", "value":55555}, 
            {"label":"three", "value":55555},
            {"label":"four", "value":55555},
            {"label":"five", "value":55555}];
            
    var chart = d3.select("body").
      append("svg:svg").
      attr("class", 'arc').
      data([data]).
        attr("width", width+100).
        attr("height", height+100).
      append("svg:g").
        attr("transform", "translate("+ (radius+50) + ","+ (radius+50) +")");
    
    var arc = d3.svg.arc().
      outerRadius(radius).
      innerRadius(radius-70);
      
    var hoverarc = d3.svg.arc().
      outerRadius(radius+10).
      innerRadius(radius-70);

    

    function draw_arcs(chart) {
 
     var pie = d3.layout.pie().
        value(function(d) { return d.value; });
      
      var arcs = chart.selectAll("g.slice").
        data(pie).
        enter().
        append("svg:path").
        attr("fill", function(d,i) { return color(i); }).
        attr("d", arc).
        attr("class", 'slicepath').
        on("mouseover", function(d) {
          return d3.select(this).transition().attr('d', hoverarc);
        }).
        on("mouseout", function(d) {
          return d3.select(this).transition().attr('d', arc);
        });
    }
                    
    draw_arcs(chart);

 // now, change the data and try to re-render
 data[0].value = 55555;
 data[1].value = 55555;
 data[2].value = 55555;
 data[3].value = 55555;
 data[4].value = 55555;

    window.setTimeout(function() { alert('redraw?'); draw_arcs(window.chart); }, 4000);

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing Pie Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>

	</head>
	<body>
	<script type="text/javascript">

	var width = 300;
	var height = width;
	var radius = width/2;
	color = d3.scale.category20c(); //builtin range of colors

	data = [{"label":"one", "value":11402},
	{"label":"two", "value":3059},
	{"label":"three", "value":47185},
	{"label":"four", "value":61554},
	{"label":"five", "value":169428}];

	data2 = [{"label":"one", "value":55555},
	{"label":"two", "value":55555},
	{"label":"three", "value":55555},
	{"label":"four", "value":55555},
	{"label":"five", "value":55555}];

	var chart = d3.select("body").
	append("svg:svg").
	attr("class", 'arc').
	data([data]).
	attr("width", width+100).
	attr("height", height+100).
	append("svg:g").
	attr("transform", "translate("+ (radius+50) + ","+ (radius+50) +")");

	var arc = d3.svg.arc().
	outerRadius(radius).
	innerRadius(radius-70);

	var hoverarc = d3.svg.arc().
	outerRadius(radius+10).
	innerRadius(radius-70);



	function draw_arcs(chart) {

	var pie = d3.layout.pie().
	value(function(d) { return d.value; });

	var arcs = chart.selectAll("g.slice").
	data(pie).
	enter().
	append("svg:path").
	attr("fill", function(d,i) { return color(i); }).
	attr("d", arc).
	attr("class", 'slicepath').
	on("mouseover", function(d) {
	return d3.select(this).transition().attr('d', hoverarc);
	}).
	on("mouseout", function(d) {
	return d3.select(this).transition().attr('d', arc);
	});
	}

	draw_arcs(chart);

	// now, change the data and try to re-render
	data[0].value = 55555;
	data[1].value = 55555;
	data[2].value = 55555;
	data[3].value = 55555;
	data[4].value = 55555;

	window.setTimeout(function() { alert('redraw?'); draw_arcs(window.chart); }, 4000);

	</script>
	</body>
	</html>