Question

我正在尝试使用D3创建交互式旭日形图，用户可以从下拉菜单中选择数据源。选择数据源后，将删除任何现有的sunburst并使用新数据重绘。这是基于名为＆＃34; Sequences Sunburst＆＃34; http://bl.ocks.org/kerryrodden/7090426

经过一些研究后，您似乎需要遵循添加/追加/转换/退出模式。

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

选择第一个数据源时，会创建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);
});

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

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创建具有动态选择的数据源的sunburst图

1 个答案: