javascript - 响应式 d3 漏斗

Question

我遇到了这个 d3 Funnel Library 的问题

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

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%"
};

并在我更改浏览器宽度时让图表响应。

我该如何实现？

编辑:

我尝试按照建议实现此答案:Whats the best way to make a d3.js visualisation layout responsive?

这是旧代码:

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

但它仍然无法正确调整大小。我是不是实现错了，或者这不是正确的解决方案？

Answer 1

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

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

参见 http://jsbin.com/kisawi/1