높이와 너비를 설정할 때 차트가 잘립니다.

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합니다.