创建使用D3

Question

我试图创建使用D3交互式旭日图，其中用户可以从下拉菜单中选择一个数据源动态选择的数据源旭日形图。一旦数据源被选中，任何现有的旭日都将被擦除并使用新数据重绘。这是基于D3的例子，称为“序列Sunburst”http://bl.ocks.org/kerryrodden/7090426

做了一些研究，它看起来像你需要遵循添加/附加/转换/退出模式。

下面是一个半功能示例的链路上的jsfiddle：http://jsfiddle.net/DanGinMD/dhpsxm64/14/

当选择所述第一数据源，创建旭日形图。当您选择第二个数据源时，会添加第二个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 + ")"); 

您只需在此sta之前删除任何旧svg tement：

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