捕獲/保存d3.js Sunburst圖表的當前狀態

Question

我是d3.js的新手。 我正在d3.js可縮放朝陽圖表http://bl.ocks.org/mbostock/4348373中進行工作 。 當用戶放大到特定弧線時，我需要捕獲森伯斯特圖的這種狀態。 當用戶返回到朝陽圖或再次加載該圖時，他應該看到他離開的狀態。

注意：我不想序列化svg元素以顯示朝陽狀態。 如果我對其進行序列化，則圖表將是靜態的，用戶無法單擊森伯斯特並遍歷其他弧線。

建議的解決方案：我想到的一個解決方案是模擬在森伯斯特節點上的鼠標點擊，直到最后一個用戶進入。 我無法為此設計一種算法。 請指導我是否有其他解決方案..

Answer 1

您說的方法很容易實現。 我為此做了一個小樣本。 單擊Start Save按鈕以開始保存森伯斯特的狀態。 執行一些縮放操作后，單擊“ Stop Save按鈕。 您可以對圖表進行任何進一步的更改。 現在，單擊“ Load按鈕將顯示圖表的保存狀態。

 var width = 500, height = 500, radius = Math.min(width, height) / 2; var x = d3.scale.linear() .range([0, 2 * Math.PI]); var y = d3.scale.sqrt() .range([0, radius]); var color = d3.scale.category10(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ") rotate(-90 0 0)"); var partition = d3.layout.partition() .value(function(d) { return d.size; }); var arc = d3.svg.arc() .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(dx))); }) .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(dx + d.dx))); }) .innerRadius(function(d) { return Math.max(0, y(dy)); }) .outerRadius(function(d) { return Math.max(0, y(dy + d.dy)); }); var root = getData(); var savedData = partition.nodes(root); var g = svg.selectAll("g") .data(partition.nodes(root)) .enter().append("g"); var path = g.append("path") .attr("d", arc) .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) .on("click", click); var text = g.append("text") .attr("x", function(d) { return y(dy); }) .attr("dx", "6") // margin .attr("dy", ".35em") // vertical-align .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; }) .text(function(d) { return d.name; }) .style("fill", "white"); function computeTextRotation(d) { var angle = x(dx + d.dx / 2) - Math.PI / 2; return angle / Math.PI * 180; } var saveData = false; var savedData = []; d3.select("#saveBtn").on("click", function() { if (d3.select(this).attr("value") == "Start Save") { savedData = []; d3.select(this).attr("value", "Stop Save"); saveData = true; } else { d3.select(this).attr("value", "Start Save"); saveData = false; } }); d3.select("#loadBtn").on("click", function() { var root = g.filter(function(d) { return d.name == "Root" }).data(); click(root[0]); savedData.forEach(function(val) { var node = g.filter(function(d, i) { return i == val }).data(); click(node[0]); }); }); function click(d, i) { if (saveData) { if(d.name=="Root"){ savedData = []; } else{ savedData.push(i); } } // fade out all text elements if (d.size !== undefined) { d.size += 100; }; text.transition().attr("opacity", 0); path.transition() .duration(750) .attrTween("d", arcTween(d)) .each("end", function(e, i) { // check if the animated element's data e lies within the visible angle span given in d if (ex >= dx && ex < (dx + d.dx)) { // get a selection of the associated text element var arcText = d3.select(this.parentNode).select("text"); // fade in the text element and recalculate positions arcText.transition().duration(750) .attr("opacity", 1) .attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" }) .attr("x", function(d) { return y(dy); }); } }); } // Word wrap! var insertLinebreaks = function(t, d, width) { alert(0) var el = d3.select(t); var p = d3.select(t.parentNode); p.append("g") .attr("x", function(d) { return y(dy); }) .attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; }) .append("foreignObject") .attr('x', -width / 2) .attr("width", width) .attr("height", 200) .append("xhtml:p") .attr('style', 'word-wrap: break-word; text-align:center;') .html(d.name); alert(1) el.remove(); alert(2) }; d3.select(self.frameElement).style("height", height + "px"); // Interpolate the scales! function arcTween(d) { var xd = d3.interpolate(x.domain(), [dx, dx + d.dx]), yd = d3.interpolate(y.domain(), [dy, 1]), yr = d3.interpolate(y.range(), [dy ? 20 : 0, radius]); return function(d, i) { return i ? function(t) { return arc(d); } : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; }; } function getData() { return { "name": "Root", "children": [{ "name": "A1", "children": [{ "name": "B1", "size": 30 }, { "name": "B2", "size": 40 }, { "name": "B3", "children": [{ "name": "C1", "size": 10 }, { "name": "C2", "size": 15 }] }] }, { "name": "A2", "children": [{ "name": "B4", "size": 40 }, { "name": "B5", "size": 30 }, { "name": "B6", "size": 10 }] }, { "name": "A3", "children": [{ "name": "B7", "size": 50 }, { "name": "B8", "size": 15 } ] }] } }; 

 path { stroke: #fff; fill-rule: evenodd; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="main"></div> <input type="button" value="Start Save" id="saveBtn"/> <input type="button" value="Load" id="loadBtn"/> 

我不知道您打算在哪里保存朝陽狀態。 我建議Localstorage是一個不錯的選擇。

希望這可以幫助。