D3.js图表响应行为
D3.js chart responsive behavior
我试图设置侦听器改变图表宽度与jQuery,当窗口宽度改变:
// Get width of parent div with jQuery
var widthContainer = $( ".chart" ).parent().width();
//set margins
// margin conventions https://bl.ocks.org/mbostock/3019563
var margin = {top: 0, right: 0, bottom: 30, left: 40};
var width = widthContainer - margin.left - margin.right;
var height = 211 - margin.top - margin.bottom;
// set chart dimensions
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// listener
function changeWidth(){
widthContainer = $( ".chart" ).parent().width();
width = widthContainer - margin.left - margin.right;
}
$(window).resize(function(){
changeWidth();
console.log(widthContainer);
});
changeWidth()
函数改变了widthContainer
变量,但图表维度没有改变。为什么?
这是一个工作的代码依赖(第13到40行):http://codepen.io/aitormendez/pen/LbRyWa?editors=0011
提前感谢
当前的changeWidth()只计算新的宽度。您需要将新宽度设置为您想要的元素。你还需要更新你的图表的x刻度并重新绘制图表。
快速更新你的代码(我移动了changeWidth和resize到底部,并添加了重绘功能)。
var redraw = function(newWidth) {
// update xscale
escalax.range([0, newWidth]);
d3.select('.xaxis').call(xAxis);
deuda.selectAll("rect")
.attr("width", function(d) {
return rr(escalax(d[1]));
});
recono.selectAll("rect")
.attr("x", function(d) {
return rr(escalax(d[1]));
})
.attr("width", function(d) {
return rr(escalax(d[2]));
});
provee.selectAll("rect")
.attr("x", function(d) {
return rr(escalax(d[1] + d[2]));
})
.attr("width", function(d) {
return rr(escalax(d[3]));
});
credito.selectAll("rect")
.attr("x", function(d) {
return rr(escalax(d[1] + d[2] + d[3]));
})
.attr("width", function(d) {
return rr(escalax(d[3]));
});
}
function changeWidth() {
widthContainer = $(".chart").parent().width();
width = widthContainer - margin.left - margin.right;
// update chart width
d3.select('.chart')
.attr('width', width);
// redraw chart
redraw(width);
}
$(window).resize(function() {
changeWidth();
console.log(widthContainer);
});
http://codepen.io/anon/pen/JbboQL?编辑= 1010
相关文章:
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- 使Intro.js工具提示响应
- angular.js我如何设置数据什么是响应值
- Ember.js:将Em.$.getJSON转换为promise并将响应绑定到控制器上下文的正确方法
- D3.js:将一个有响应的饼图放在其父分区的中心
- 使用Backbone.js访问JSON响应的部分
- 引导:响应式设计-当窗口大小从980px调整到979px时执行JS
- 为什么新js Fetch标准禁止响应头名称为'设置Cookie 1/2'
- JS-通用解析JSON响应
- 分析angular.js中的JSONP$http.json()响应
- Rails 4远程true和响应js
- 为什么我的rails应用程序在生产环境中没有正确响应.js格式
- 如何使用响应式iframes使iframe响应.js
- 如何在没有 Web 服务器的情况下做出响应.js工作
- 响应.js将首选媒体查询而不是稍后定义的全局选择器
- IE8 支持使用响应.js进行媒体查询
- ie8响应js'未定义'为null或不是对象
- mobilesafari 5在下一次行动之前没有响应js事件
- 命令按钮不响应JS函数
- 如何在向第三方 API 节点发出多个请求后发送响应.js.