如何在离散的BarChart nvd3.js上的y轴上设置域和缩放 [英] How to set the domain and scale on an yaxis on a discreteBarChart nvd3.js

问题描述

我在我的应用程序中使用d3.js图表​​。
这里他们是这张图片
请参见图表

对于Y轴在金钱图表上（参见图片），我想将最大值四舍五入为400，无论最大条尺寸在这里是$ 358.72，但我想保持在358.72，但是

 <$ c 
 $ c> tradesChart = [
 {
 key：Cumulative Return，
 values：[
 {
label：6E，
 value：100}，
 {
label：NG，
value：100}，
 {
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 ％'））
 
 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 dv;}）]）; 
  

在您的情况下，您应该修改为更像这样：

  yScale.domain（[0，400]）; 
  

或者，如果要设置数据或一个最小静态值，你可以做如下：

  yScale.domain（[0，d3.max函数（d）{return dv> 400？dv：400;}）]）; 
  

一个完整的例子jsfiddle是在这里。

这是如何做到D3.js，我不熟悉的vvdo nvd3.js lib，所以我不知道如何访问规模，但我会看看，看看是否可以找到它。

I'm using d3.js charts in one of my applications. Here they are in this image See Charts

For Y axis on Money chart (See in the Image), I want maximum value rounded to 400, no matter what maximum bar size is here it is $358.72, but I want to keep bar at 358.72 but on Y Axis it would be 400 Limit.

Code for it is here

tradesChart = [ 
      {
        key: "Cumulative Return",
        values: [
                        {
            "label" : "6E",
            "value" : 100       },
                    {
            "label" : "NG",
            "value" : 100       },
                    {
            "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;
    });

Kindly Help me to solve this out

解决方案

You need to modify the domain of the Y-axis scale. Usually it is derived from the maximum value of the data with a statement like the following:

yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]);

In your case, you should modify it to be more like this instead:

yScale.domain([0, 400]);

Alternatively, if you want to set the maximum value from the data or a minimum static value, you could do something like the following:

yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]);

A full example jsfiddle is here.

That's how to do it with D3.js, I'm not familiar with the venerable nvd3.js lib, so I'm not sure how to access the scale, but i'll take a look and see if I can find it.

这篇关于如何在离散的BarChart nvd3.js上的y轴上设置域和缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！