设置高度和宽度时图表会被剪裁

Question

我正在尝试使用nvd3.js创建一个简单的折线图。我有一个简单的工作，看起来像这样：

当我手动设置我的高度和宽度时，它们都会被切断。

我的代码如下：

var min_date = data[0].values[0].x
var max_date = data[0].values[0].x
var xScale = d3.time.scale()
  .domain([min_date, max_date]);

var width = nv.utils.windowSize().width - 40,
  height = nv.utils.windowSize().height - 40;

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    .height(height)
    .width(width)
    ;

  chart.xAxis
    .scale(xScale)
    .axisLabel('Day')
    .tickFormat(function(d){
      return d3.time.format('%x')(new Date(d))
    })
    .tickValues(data[0].values.map(function(d){
      return d.x;
    }))
    ;

  chart.xScale(d3.time.scale());

  chart.yAxis
    .axisLabel('Followers')
    .tickValues(data[0].values.map(function(d){
      return d.y;
    }))
    .ticks(1)
    ;

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart)
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});

我似乎无法弄清楚发生了什么。有什么想法吗？

更新 在我尝试调整它之前，这是顶部图形的jsfiddle。 http://jsfiddle.net/yw7Jn/1/

日期可以忽略。当我做小提琴时，他们搞砸了，但对我来说工作正常。

Answer 1

如果更改图表的尺寸，还需要相应更改封闭SVG的尺寸：

var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
      .height(800)
// ...
d3.select('#chart svg')
    .attr("height", 800)
    .datum(chartData)
    ...

完整演示here。