Javascript 响应式d3漏斗

我在这方面遇到了麻烦

我目前正在使用此设置使图表响应加载：

var data = [
    [ "Clicked", "5,000" ],
    [ "Joined", "2,500" ],
    [ "Shared", "50" ]
];

width = $('#funnelPanel').width();

var options = {
    width : width - 30,
    height : 400,
    bottomWidth : 1/3,
    bottomPinch : 0,      // How many sections to pinch
    isCurved : false,     // Whether the funnel is curved
    curveHeight : 20,     // The curvature amount
    fillType : "solid",   // Either "solid" or "gradient"
    isInverted : true,   // Whether the funnel is inverted
    hoverEffects : true  // Whether the funnel has effects on hover
};

$( "#funnelContainer" ).css( "width", width);

var funnel = new D3Funnel ( data, options );
funnel.draw ( "#funnelContainer" );

然而，我希望能够做到以下几点：

var options = {
    width : "100%",
    height : "100%"
};

当我更改浏览器的宽度时，让图表响应

我如何做到这一点

编辑：

我尝试按照建议实施这个答案：

以下是旧代码：

var svg = d3.select ( selector )
      .append ( "svg" )
      .attr ( "width", this.width )
      .attr ( "height", this.height )
      .append ( "g" );

这是我的修改版本：

var svg = d3.select ( selector )
      .append ( "svg" )
      .attr ( "width", this.width )
      .attr ( "height", this.height )
      .attr("id", "funnel")
      .attr("viewBox", "0 0 " + this.width  + " " + this.height )
      .attr("preserveAspectRatio", "xMinYMin")
      .append ( "g" );

 var aspect = this.width / this.height;
 var chart = $("#funnel");
 $(window).on("resize", function() {
    var targetWidth = chart.parent().width();
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
 });

---

但它仍然无法正确调整大小。我是否执行错误，或者这不是正确的解决方案

漏斗图似乎没有在创建后更新其宽度的选项。因此，适应新尺寸的最简单方法就是创建一个新漏斗：

$(window).on("resize", function() {
    options.width = $("#funnelPanel").width();
    var funnel = new D3Funnel ( data, options );
    funnel.draw('#funnelContainer');
});

---

请参见

看看是的，最好（也是唯一的？）的方法是使svg本身具有响应性。正如上面链接的回复所暗示的，我们只是尝试使用该解决方案，但没有成功。更新了我的问题以展示我是如何做到的。嗨，Hupukar。这听起来是一个很好的解决方案。你能把它作为答案（而不是问题的编辑）发布并接受吗？这将使以后发现此问题的人更容易快速看到答案（因为“已接受的答案”比您的编辑更显眼）。