增加d3 SVG容器大小

我正在嘗試增加我的SVG容器的大小以便它適合所有數據。有一個解釋SVG動態增加的小提琴：http://jsfiddle.net/CKW5q/增加d3 SVG容器大小

但是，相同的概念不適用於雙向sankey圖表（d3）。以下是擴展父節點的函數：

function expand(node) { 
    node.state = "expanded"; 
    node.children.forEach(function (child) { 
    child.state = "collapsed"; 
    child._parent = this; 
    child.parent = null; 
    containChildren(child); 
      }, node); 
    HEIGHT = HEIGHT + node.children.length * 10; //update height by 10px per child 
    WIDTH = WIDTH + node.children.length * 10;//update width 
} 
    svg.attr("height", HEIGHT); // update svg height

這給出了非常奇怪的結果。這無疑增加了容器，但不幸的是保持原始SVG尺寸不變：

我假設SVG高度和寬度被宣佈在腳本的開始需要更新，這對於一些原因，我不能。任何幫助將不勝感激。

來源

2016-04-15 Omkar

你說的是有窗口上的SVG容器配合調整？因此，作出迴應？ – timolawl

是的，它應該是響應式的。它應該採取更新的高度並調整其自身。有趣的是，畫布更新了它的高度，但是當涉及實際的svg時，它不會：如果您在腳本中查看第32,33行或bl.ocks.org站點以查找d3雙向sankey圖表。 js，你會看到： HEIGHT = 500 - MARGIN.TOP - MARGIN.BOTTOM， WIDTH = 960 - MARGIN.LEFT - MARGIN.RIGHT，此高度和寬度需要更新。但不是。它可能是因爲update（）函數只用預設的高度和寬度運行一次。我們如何改變這一點？非常感謝。 – Omkar

你需要做這樣的事情：

var Chart = (function(window, d3) { 

    (init code that doesn't change on resize here) 

    render(); 

    function render() { 
     updateDimensions(); 
     (code that needs to be re-rendered on resize here) 
    } 

    function updateDimensions() { 
     margin = {top: 100, right: 40, bottom: 80, left: 80}; // example 

     width = window.innerWidth - margin.left - margin.right; 
     height = window.innerHeight - margin.top - margin.bottom; 
    } 

    return { 
     render: render 
    } 
})(window, d3); 

window.addEventListener('resize', Chart.render);

來源

2016-04-15 14:55:20 timolawl

謝謝timolawl，我會盡力回覆。很多幫助表示讚賞。 – Omkar

忘記在渲染函數的開頭添加'updateDimensions（）;'。剛添加它。 – timolawl

當然可以！如果它解決了你的問題，一定要接受答案。 – timolawl

增加d3 SVG容器大小

回答

相關問題