Question

我用NVD3制作了一个MultiBarChart。然而，一位同事表示我需要在每个澳大利亚州之间留出更多空间。所以，塔斯马尼亚进一步来自维多利亚等。

我找不到以非开发人员语言解释此问题的论坛。我不是开发人员，而是去了。

这是我的代码......

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;
});

感谢超级善良和聪明的人！

Answer 1

不需要使用太多的代码来使用以下代码：

 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

Answer 2

遗憾的是，您无法在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);

Answer 3

在搜索一种在栏之间添加更多空间的方法时发现了这个问题。像Lars所说，你可以在绘制图表后更改条形图。但是，当您在不更改每个条形之间的间距的情况下增加条形高度时，它会溢出。要在条形图之间添加空格，您应该使用xRange：

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

酒吧之间的nvd3空间

3 个答案: