条形图中条形的NVD3力特定宽度

NVD3 force specific width of bar in bar chart

本文关键字：NVD3 条形图      更新时间：2023-09-26

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

这是我当前的图表设置。

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

我想，由于我找不到任何关于这个特定问题的问题，可能很简单，我错过了。提前谢谢。

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

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

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

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

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

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

其他修复，如更改条形图（rect）的css属性并将宽度设置为修复值或使用dispatch事件，肯定会减少条形图的宽度，但会扰乱布局，并且您必须手动进行计算，根据条形图宽度的更改设置数据标签和其他值。

.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所需的数据格式，但apexchart确实有很多功能，只需在bar的plotOptions中设置columnWidth属性就可以轻松解决您的问题。

为了回答我自己的问题，我不得不使用jQuery"手动"更改值，以使图表按我希望的方式显示。

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

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

相关文章：