NVD3 强制条形图中条形的特定宽度答案

【问题标题】：NVD3 force specific width of bar in bar chartNVD3 强制条形图中条形的特定宽度
【发布时间】：2013-07-11 03:28:31
【问题描述】：

我正在尝试在 nvd3 离散条形图上设置特定的宽度值。我可以在初始渲染后更改矩形元素，但似乎有某种方法可以在图表设置中指定条形宽度。

这是我当前的图表设置。

nv.addGraph ->
  chart = nv.models.discreteBarChart()
    .x (d) ->
      return d.label
    .y (d) ->
      return d.value
    .staggerLabels(false).showValues(false)
    .color(['#56bd78']).tooltips(false)
    .margin({top: 0, right: 0, bottom: 30, left: 0})

  chart.tooltipContent (key, x, y, e, graph) ->
    return '<h3><span>' + parseFloat(y) + '</span><em>' +
             key + '</em></h3>'

  chart.xAxis.tickFormat (d) ->
      return d3.time.format('%b')(new Date('2013/'+d+'/01'))
  # chart.xAxis.tickPadding({top: 0, bottom: 0, left: 20, right:30})

  d3.select(element).datum(data).transition().duration(500).call(chart)

  nv.utils.windowResize(chart.update)
  return chart

我假设因为我找不到关于这个特定问题的任何已发布问题，它可能很简单，我想念它。提前致谢。

【问题讨论】：

NVD3 将设置宽度以便使用图形的整个范围。 AFAIK 你无法改变它——如果你想超越它提供的功能，NVD3 就不是很灵活。
如果可以更改宽度，是否可以设置列之间的填充

标签： javascript d3.js nvd3.js

【解决方案1】：

尝试chart.groupSpacing(0.5) 并相应地更改值，看看它是否能解决问题。

【讨论】：

(index):101 Uncaught TypeError: barChart.groupSpacing is not a function
也不是模型linePlusBarChart的功能

【解决方案2】：

解决这个问题的一个好方法是使用 CSS：

.nv-bars rect {
  width: 20px;
}

这是我们在应用程序中所做的，效果很好。

【讨论】：

我看到类 .nv-bar （单数）至少适用于某些图表类型

【解决方案3】：

在 Nvd3 中，条形图中单个条形的宽度取决于图表的数据项数。

好吧，首先，groupSpacing 在 nvd3 的多条形图中工作，而不是在离散条形图中。但是，它并不能解决你的这个问题。

其他修复，例如更改 bar(rect) 的 css 属性并将宽度设置为固定值或使用调度事件肯定会减小条的宽度，但会破坏布局，您将拥有根据您的条形宽度更改手动进行计算以设置您的数据标签和其他值。

.nv-groups .nv-group rect{
    width: 50px;
}

或

 chart.dispatch.on("renderEnd", (d) => {
    d3.selectAll("rect.discreteBar").attr('width', 50);
    d3.selectAll("g.nv-bar text").attr('x', 30);
    d3.selectAll(".nv-discretebar").attr('transform', 'translate(100,0)');  
}
);

无论如何，我不想修补库或添加手动计算，因为我有没有固定特定数据长度的动态数据。

解决这个问题对我有用的是将库从 nvd3 更改为 apexcharts(http://apexcharts.com/)。

这种转变只需要一点时间来更改 apexcharts 所需的数据格式，但 apexcharts 确实具有如此多的功能，只需在 plotOptions 的 @987654327 中设置 columnWidth 属性即可轻松解决您的问题@。

【讨论】：

【解决方案4】：

要回答我自己的问题，我必须“手动”使用 jQuery 更改值以使图表按我想要的方式显示。

$(element+' rect.discreteBar').attr('transform', 'translate(17)').attr('width', 20)
$(element+' .nv-axis g text').attr('transform', 'translate(0, 5)')

正如 Lars 所指出的，库根据项目的数量动态计算宽度，这是有道理的。

【讨论】：