使用 D3 使用动态选择的数据源创建旭日图

Question

我正在尝试使用 D3 创建一个交互式旭日图，用户可以从下拉菜单中 select 数据源。一旦数据源被 selected，任何现有的旭日形图都将被擦除并使用新数据重新绘制。这是基于名为 "Sequences Sunburst" http://bl.ocks.org/kerryrodden/7090426

的 D3 示例

经过一些研究，您似乎需要遵循 add/append/transition/exit 模式。

这是 JSFiddle 上的半功能示例的 link：http://jsfiddle.net/DanGinMD/dhpsxm64/14/

当您 select 第一个数据源时，会创建旭日图。当您 select 第二个数据源时，将添加第二个旭日形。每一个似乎都连接到其独特的数据源。如何在绘制第二个旭日之前擦除第一个旭日？

下拉框监听事件的代码如下：

// 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);
});

下面是绘制旭日图的代码：

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();

}

Answer 1

请注意以下在可视化初始化时附加新 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 + ")");

fiddle

使用 D3 使用动态选择的数据源创建旭日图

Creating a sunburst diagram with dynamically chosen data source using D3

javascript

d3.js

sunburst-diagram