增加d3 SVG容器大小 [英] Increasing d3 SVG container size

问题描述

我试图动态增加我的SVG容器的大小，使其适合所有的数据。有一个小提琴解释了SVG的动态增长：
我想SVG HEIGHT和WIDTH在脚本的开始被声明需要更新，这是由于某些原因不能。

解决方案

您需要这样做：

  var Chart =（function（window，d3）{
 
（在这里调整大小时不改变的初始化代码）
 
 render（）; 
 
 function render（）{
 updateDimensions（）; 
（需要在resize时重新呈现的代码）
} 
 
 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）; 
  

I am trying to increase the size of my SVG container dynamically so that it fits all the data. There is a fiddle which explains the dynamic increase of the SVG: http://jsfiddle.net/CKW5q/

However, the same concept doesn't work for a bi-directional sankey chart(d3). Following is the function called to expand the parentnode:

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

This gives very odd results. It definitely increases the container, but unfortunately keeps the original SVG dimensions intact:

I suppose that the SVG HEIGHT and WIDTH being declared at the start of the script needs to be updated, which for some reasons am not able to. Any help will be appreciated.

解决方案

You will need to do something like this:

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);

这篇关于增加d3 SVG容器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！