Javascript 使用D3创建具有动态选择的数据源的sunburst图

我正在尝试使用D3创建一个交互式sunburst图，用户可以从下拉菜单中选择数据源。一旦选择了数据源，任何现有的sunburst都将被删除，并使用新数据重新绘制。这是基于D3示例“Sequences Sunburst”

在做了一些研究之后，您似乎需要遵循添加/附加/转换/退出模式

下面是一个指向JSFIDLE上半功能示例的链接：

选择第一个数据源时，将创建sunburst图表。当您选择第二个数据源时，将添加第二个sunburst。每一个似乎都连接到其唯一的数据源。如何在绘制第二个日光之前擦除第一个日光

以下是下拉框的侦听器事件代码：

// an event listener that (re)draws the breadcrumb trail and chart
d3.select('#optionsList') 
  .on('change', function() {
  var newData = eval(d3.select(this).property('value'));
  createVisualization(newData);
});

以下是绘制sunburst图表的代码：

function createVisualization(json) { 
  sysName = json.sysName;
  var titletext = sysName + " - Impact to 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 the sunburst, to make it 
  //  easier to detect  when the mouse leaves the parent g.
  vis.append("svg:circle")
    .attr("r", radius)
    .style("opacity", 0);

 // For efficiency, filter nodes to keep only those large enough to 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 the mouseleave handler to the bounding circle.
   d3.select("#container").on("mouseleave", mouseleave);

    // Get total size of the tree = value of root node from partition.
    totalSize = path.node().__data__.value; 

    path.exit().remove();
    nodes.exit().remove();
    arc.exit().remove();
    partition.exit().remove();
    vis.exit().remove();

}

---

请注意，以下调用在可视化初始化时附加了一个新的svg：

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 + ")");

在此语句之前，您只需删除任何旧的svg：

  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 + ")");

---

注意以下调用，它在可视化初始化时附加了一个新的svg：

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 + ")");

在此语句之前，您只需删除任何旧的svg：

  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 + ")");

---

你需要更新小提琴，不要给我看任何东西。你需要更新小提琴，不要给我看任何东西。你需要更新小提琴，不要给我看任何东西。