當設置高度和寬度時，圖表會被剪裁

我正嘗試使用nvd3.js創建一個簡單的線條圖。我有一個簡單的工作，它看起來像這樣：當設置高度和寬度時，圖表會被剪裁

Height/width not set

當我手動設置我的高度和寬度，這一切都被切斷。

Manually set

我的代碼看起來像這樣：

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/

日期可以忽略。當我做小提琴時他們搞砸了，但對我來說工作得很好。

來源

2014-05-19 ukejoe

NVD3應該自己設置正確的高度和寬度。這不適合你嗎？ –

那麼，第一張圖片只是使用默認的高度/寬度。我沒有設置它。雖然它對我來說太緊湊了。我想把它做得更高，但是它會像第二張照片一樣被切斷。 – ukejoe

它應該像這樣工作。網頁上還有其他元素嗎？你能發佈一個完整的可重複的例子嗎？ –

如果更改圖表的尺寸，還需要改變尺寸相應的封閉SVG：

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

完成演示here。

來源

2014-05-19 16:06:00

啊，我知道這將是這樣簡單的事情。謝謝！ – ukejoe

當設置高度和寬度時，圖表會被剪裁

回答

相關問題