我在我的一个应用程序中使用d3.js图表.
他们在这张图片中
见 Charts
他们在这张图片中
见 Charts
对于货币图表上的Y轴(参见图片),我希望最大值四舍五入为400,无论这里的最大条形尺寸是358.72美元,但我想保持在358.72,但在Y轴上它将是400限制.
代码就在这里
- tradesChart = [
- {
- key: "Cumulative Return",values: [
- {
- "label" : "6E","value" : 100 },{
- "label" : "NG",{
- "label" : "TF","value" : 67 } ]
- }
- ];
- nv.addGraph(function() {
- var chart = nv.models.discreteBarChart()
- .x(function(d) { return d.label })
- .y(function(d) { return d.value/100 })
- .staggerLabels(true)
- .showValues(true)
- .valueFormat(d3.format('.0%'))
- chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; });
- d3.select('#chart-trades svg')
- .datum(tradesChart)
- .transition().duration(500)
- .call(chart);
- nv.utils.windowResize(chart.update);
- return chart;
- });
请帮我解决这个问题
解决方法
您需要修改Y轴刻度的域.通常它是使用如下语句从数据的最大值派生的：
- yScale.domain([0,d3.max(data,function (d) { return d.v; }) ]);
在您的情况下,您应该将其修改为更像这样：
- yScale.domain([0,400]);
或者,如果要从数据或最小静态值设置最大值,可以执行以下操作：
- yScale.domain([0,function (d) { return d.v > 400 ? d.v : 400; }) ]);
一个完整的示例jsfiddle是here.
这是用D3.js做的,我不熟悉古老的nvd3.js lib,所以我不知道如何访问比例,但我会看一看,看看能不能找到它.
