初めに
* 例えば、ダイアログを表示した後に、グラフをappendで追加した形で描画するといった構成の場合 ダイアログを表示し、その後再度、ダイアログを表示させた場合 以前のグラフが表示されたまま、グラフが再度描画されてしまう（グラフが増え続けて描画される） => そのため、一度追加した要素を削除する方法を考える
使用する知識
[1] 要素を指定するには...
* select() : 要素を指定する * selectAll() : 複数要素を指定する
[2] 要素を削除するには...
* remove() : 要素を削除する ■おまけ：要素を追加するには... * append() : 要素を追加する
構文
select("[削除したいグラフの親要素]").selectAll("svg").remove();
サンプル
http://blogs.yahoo.co.jp/dk521123/35435961.htmlの円グラフを元にしている
* 「Draw」ボタン押下し続けたグラフ描画し続ける。
* 「Clear」ボタン押下で、グラフが削除。
<html> <head> <meta charset="UTF-8"> <style> </style> </head> <body> <button onClick="drawChart('#sample')">Draw</button> <button onClick="clearChart('#sample')">Clear</button> <div id="sample"></div> <script src="">http://d3js.org/d3.v3.js"> <script> function drawChart(chartId) { var dataset = [ {graphLegend:"001", graphValue:10, graphColor:"LightPink"}, {graphLegend:"002", graphValue:20, graphColor:"LightCyan"}, {graphLegend:"003", graphValue:30, graphColor:"LightGoldenrodYellow"}, {graphLegend:"004", graphValue:25, graphColor:"Aquamarine"}, {graphLegend:"005", graphValue:10, graphColor:"MistyRose"} ]; var width = 960, height = 500, radius = Math.min(width, height) / 2; var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.graphValue; }); var tooltip = d3.select(chartId) .append("div") .style("position", "absolute") .style("z-index", "20") .style("visibility", "hidden"); var svg = d3.select(chartId).append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(dataset)) .enter().append("g") // なんちゃってTooltip .on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) .on("mousemove", function(d, i){ return tooltip .style("top", (event.pageY-10)+"px") .style("left",(event.pageX+10)+"px") .html("<div style='bold'> Value : " + d.data.graphValue + "</div>");}); g.append("path") .attr("d", arc) .style("fill", function(d) { return d.data.graphColor; }) // アニメーション効果 .transition() .duration(1000) // 1秒間でアニメーションさせる .attrTween("d", function(d){ var interpolate = d3.interpolate( { startAngle : 0, endAngle : 0 }, { startAngle : d.startAngle, endAngle : d.endAngle } ); return function(t){ return arc(interpolate(t)); } }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d.data.graphLegend; }); } // ★ここ★ function clearChart(chartId) { d3.select(chartId).selectAll("svg") .remove(); } </script> </body> </html>
