nan*_*nno 5 javascript d3.js nvd3.js
我试图在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
Run Code Online (Sandbox Code Playgroud)
我假设因为我找不到关于这个特定问题的任何发布的问题,它可能很简单,我想念它.提前致谢.
San*_*eep 11
尝试chart.groupSpacing(0.5)并相应地更改值以查看它是否解决了问题.
为了回答我自己的问题,我必须使用 jQuery“手动”更改值,以使图表按照我想要的方式显示。
$(element+' rect.discreteBar').attr('transform', 'translate(17)').attr('width', 20)
$(element+' .nv-axis g text').attr('transform', 'translate(0, 5)')
Run Code Online (Sandbox Code Playgroud)
正如 Lars 指出的,该库根据项目数量动态计算宽度,这是有道理的。
| 归档时间: |
|
| 查看次数: |
10083 次 |
| 最近记录: |