d3 js shiny 交互式调整大小

Question

I am currently trying to implement the following chord diagram into my R Shiny application using d3 js visualization (r2d3): http://bl.ocks.org/NPashaP/ba4c802d5ef68f70c019a9706f77ebf1

但是，svg 的大小似乎是固定的，不会根据浏览器 window 的大小调整大小。 那是原始代码：

var ch = viz.ch().data(data)
      .padding(.01)
      .sort(sort)
      .innerRadius(430)
      .outerRadius(450)
      .duration(1000)
      .chordOpacity(0.3)
      .labelPadding(.03)
      .fill(function(d){ return colors[d];});

var width=1200, height=1100;

var svg = d3.select("body").append("svg").attr("height",height).attr("width",width);
svg.append("g").attr("transform", "translate(600,550)").call(ch);

我尝试使用 r2d3 svg 已经提供的宽度和高度，并使用这些数据来计算图表的内/外半径：

var width = width,
height = height,
outerRadius = Math.min(width, height) / 2 - 10,
innerRadius = outerRadius - 24;

var ch = viz.ch().data(data)
      .padding(.01)
      .sort(sort)
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .duration(1000)
      .chordOpacity(0.3)
      .labelPadding(.03)
      .fill(function(d){ return colors[d];});

var svg = div.append("svg").attr("height",height).attr("width",width);

svg.append("g").attr("transform", "translate(250,250)").call(ch);

但是，这似乎不起作用。 图表要么不完全可见（图表的一部分放在屏幕外），要么不在屏幕中央。 我在这里想念什么？