D3.js图表​​

Question

我正在尝试设置监听器来更改图表的宽度与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变量，但图表尺寸不改变。为什么？

这里是一个工作codepen（线13〜40）： http://codepen.io/aitormendez/pen/LbRyWa?editors=0011

预先感谢您

Answer 1

您当前changeWidth（）只计算新的宽度。你需要将新的宽度设置为你想要的元素。 而且您还需要更新图表x-scale并重新绘制图表。

快速更新到您的codepen（我移动changeWidth和调整大小到底部，并添加重绘功能）。

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?editors=1010