javascript - Creating a sunburst diagram with dynamically chosen data source using D3 -

i trying create interactive sunburst diagram using d3, user can select data source dropdown menu. once data source selected, existing sunburst erased , redraw using new data. based off d3 example called "sequences sunburst" http://bl.ocks.org/kerryrodden/7090426

having done bit of research, looks need follow add/append/transition/exit pattern.

here link semi-functioning example on jsfiddle: http://jsfiddle.net/danginmd/dhpsxm64/14/

when select first data source, sunburst diagram created. when select second data source, second sunburst added. each 1 appears connected unique data source. how erase first sunburst before drawing second sunburst?

here code listener event dropdown box:

// event listener (re)draws breadcrumb trail , chart d3.select('#optionslist')    .on('change', function() {   var newdata = eval(d3.select(this).property('value'));   createvisualization(newdata); }); 

here code draws sunburst diagram:

function createvisualization(json) {    sysname = json.sysname;   var titletext = sysname + " - impact organization";   d3.select("#title2").text(titletext);   initializebreadcrumbtrail();    var vis = d3.select("#chart").append("svg:svg")     .attr("width", width)     .attr("height", height)     .append("svg:g")     .attr("id", "container")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");    var partition = d3.layout.partition()     .size([2 * math.pi, radius * radius])     .value(function(d) { return d.size; });    var arc = d3.svg.arc()     .startangle(function(d) { return d.x; })     .endangle(function(d) { return d.x + d.dx; })     .innerradius(function(d) { return math.sqrt(d.y); })     .outerradius(function(d) { return math.sqrt(d.y + d.dy);  });    // bounding circle underneath sunburst, make    //  easier detect  when mouse leaves parent g.   vis.append("svg:circle")     .attr("r", radius)     .style("opacity", 0);   // efficiency, filter nodes keep large enough see. var nodes = partition.nodes(json)    .filter(function(d) {     return (d.dx > 0.005); // 0.005 radians = 0.29 degrees     });   var path = vis.data([json]).selectall("path")     .data(nodes)     .enter().append("svg:path")     .attr("display", function(d) { return d.depth ? null : "none"; })     .attr("d", arc)     .attr("fill-rule", "evenodd")     .style("fill", function(d) { return colors[d.category]; })     .style("opacity", 1)     .on("mouseover", mouseover);      // add mouseleave handler bounding circle.    d3.select("#container").on("mouseleave", mouseleave);      // total size of tree = value of root node partition.     totalsize = path.node().__data__.value;       path.exit().remove();     nodes.exit().remove();     arc.exit().remove();     partition.exit().remove();     vis.exit().remove();  } 

note following call appends new svg @ visualization initialization:

var vis = d3.select("#chart").append("svg:svg")     .attr("width", width)     .attr("height", height)     .append("svg:g")     .attr("id", "container")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

you need remove old svg before statement:

  d3.select("#chart svg").remove();   var vis = d3.select("#chart").append("svg:svg")     .attr("width", width)     .attr("height", height)     .append("svg:g")     .attr("id", "container")     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

fiddle