創建使用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