我遇到了这个 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);
});
但它仍然无法正确调整大小。我是不是实现错了,或者这不是正确的解决方案?
最佳答案
漏斗图似乎没有在创建后更新其宽度的选项。因此,适应新尺寸的最简单方法是简单地创建一个新漏斗:
$(window).on("resize", function() {
options.width = $("#funnelPanel").width();
var funnel = new D3Funnel ( data, options );
funnel.draw('#funnelContainer');
});
关于javascript - 响应式 d3 漏斗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25288188/