Question

的问题

我目前正在使用此设置来使图表响应onload：

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

响应式d3漏斗

1 个答案: