使用 D3 创建具有动态选择的数据源的旭日形图答案

【问题标题】：Creating a sunburst diagram with dynamically chosen data source using D3使用 D3 创建具有动态选择的数据源的旭日形图
【发布时间】：2015-06-19 18:04:24
【问题描述】：

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

做了一些研究，看起来您需要遵循添加/追加/过渡/退出模式。

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

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

下面是下拉框监听事件的代码：

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

}

【问题讨论】：

你需要更新小提琴，不要向我展示任何东西。

标签： javascript d3.js sunburst-diagram

【解决方案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

【讨论】：