Javascript D3.js图表响应行为

我正在尝试设置listener，以便在窗口宽度更改时使用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行）：

提前感谢

您当前的changeWidth（）仅计算新宽度。您需要将新宽度设置为所需的元素。 您还需要更新图表的x比例并重新绘制图表

快速更新代码笔（我将changeWidth和resize移到底部，并添加了重画功能）

您当前的changeWidth（）仅计算新宽度。您需要将新宽度设置为所需的元素。 您还需要更新图表的x比例并重新绘制图表

快速更新代码笔（我将changeWidth和resize移到底部，并添加了重画功能）

次要修正（第243行）：.attr（'width'，width+margin.left+margin.right）；次要修正（第243行）：.attr（'width'，width+margin.left+margin.right）；

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