javascript NVD3 强制条形图中条形的特定宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17617432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NVD3 force specific width of bar in bar chart
提问by nanno
I am trying to get a specific width value set on a nvd3 discrete bar chart. I can change the rect elements after the initial render, but it seems like there would be some way to designate a bar width in the set-up of the chart.
我正在尝试在 nvd3 离散条形图上设置特定的宽度值。我可以在初始渲染后更改 rect 元素，但似乎有某种方法可以在图表设置中指定条形宽度。
Here is my current chart settings.
这是我当前的图表设置。
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
I am assuming since I can't find any posted questions about this particular issue, it is probably so simple I am missing it. Thanks in advance.
我假设因为我找不到关于这个特定问题的任何已发布的问题，它可能很简单我错过了它。提前致谢。
回答by Sandeep
Try chart.groupSpacing(0.5)and change the value accordingly to see if it solves the issue.
尝试chart.groupSpacing(0.5)并相应地更改值以查看它是否可以解决问题。
回答by David Parker
A good way to solve this is with CSS:
解决这个问题的一个好方法是使用 CSS：
.nv-bars rect {
width: 20px;
}
This is what we did within our application and it worked great.
这就是我们在应用程序中所做的，并且效果很好。
回答by nanno
To answer my own question I had to "manually" change the values using jQuery to get the chart to display as I wanted it to.
为了回答我自己的问题，我必须“手动”使用 jQuery 更改值以使图表按照我的意愿显示。
$(element+' rect.discreteBar').attr('transform', 'translate(17)').attr('width', 20)
$(element+' .nv-axis g text').attr('transform', 'translate(0, 5)')
As Lars pointed out, the library dynamically calculates the widths based on the number of items, which makes sense.
正如 Lars 所指出的，该库根据项目的数量动态计算宽度，这是有道理的。
