nvd3之間的空間

我製作了一個帶有NVD3的MultiBarChart。但是，它的工作原理是，一位同事說我需要在每個澳大利亞州之間留出更多的空間。所以，塔斯馬尼亞進一步從維多利亞等nvd3之間的空間

我無法找到一個論壇，說明這一點在非開發語言。我不是一個開發人員，但是要去一趟。

這裏是我的代碼...

var chart; 
nv.addGraph(function() { 
chart = nv.models.multiBarHorizontalChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return d.value }) 
    .margin({top: 30, right: 105, bottom: 30, left: 103}) 
    .tooltips(true) 
    .showControls(false); 

chart.yAxis 
    .tickFormat(d3.format(',.1f')); 

d3.select('#chart1 svg') 
    .datum(long_short_data) 
.transition().duration(1400) 
    .call(chart); 

nv.utils.windowResize(chart.update); 

chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 

return chart; 
});

謝謝你超級善良，聰明的人！

來源

2014-01-19 JasTonAChair

這是不幸的事情，你不能在NVD3配置。但是，您可以在創建圖表之後更改條的高度，使其看起來好像它們之間有更多空間。做到這一點的代碼很簡單：

d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3);

默認高度爲chart.xAxis.rangeBand()/2 - 你認爲合適，你可以調整。運行此代碼時唯一要記住的是NVD3爲其元素設置了動畫，所以並非所有內容都會在開頭或值被覆蓋。你可以通過調用使用setTimeout代碼之前等待的少量時間解決這個問題：

setTimeout(function() { 
    d3.selectAll(".nv-bar > rect").attr("height", chart.xAxis.rangeBand()/3); 
}, 100);

來源

2014-01-19 12:51:41

剛剛發現了這個問題，同時尋找一種方式來條之間添加更多空間。就像拉爾斯說的那樣，你可以在繪製圖表後改變條的大小。但是，如果在不更改每個欄之間的間距的情況下增加欄高度，則會溢出。這些小節之間加空格，你應該使用XRANGE：

var chart = nv.models.multiBarHorizontalChart().xRange([0, 125])

來源

2014-04-14 16:42:38 nmat

沒必要用太多的代碼間距只需使用下面的代碼：

var chart = nv.models.multiBarChart(); 
      //added by santoshk for fix the width issue of the chart 
      chart.groupSpacing(0.8);//you can any value instead of 0.8

來源

2016-10-20 10:12:07 santoshK

nvd3之間的空間

回答

相關問題