响应式d3漏斗

Responsive d3 Funnel

本文关键字：漏斗 d3 响应      更新时间：2023-09-26

我有这个d3漏斗库的麻烦

我目前使用这个设置使图表响应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%"
};

，并有图表响应，因为我改变了浏览器的宽度。

我如何做到这一点?

编辑:

我试着按照建议实现这个答案:让d3.js可视化布局响应的最好方法是什么?

旧代码:

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

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

相关文章：