Geek asks and answers

How to set domain and scale on yaxis on discreteBarChart nvd3.js

I am using d3.js diagrams in one of my applications. Here they are in this image. See Charts .

For the Y axis on the money chart (see image), I want the maximum value to be rounded to 400, no matter what the maximum bar size here is $ 358.72, but I want to keep the bar at 358.72, but along the Y axis it will be up to 400.

The code for this 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;
    });

Please help me solve this problem.

+5
source share
2 answers

You need to change the domain of the Y-axis scale. It is usually inferred from the maximum data value with an instruction similar to 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:

yScale.domain([0, 400]);

, , - :

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

jsfiddle - .

D3.js, nvd3.js lib, , , , .

+13

Y

Y (.. 0 / ..). d3.js , , d3.js, .

: (.. [0, 50]

http://cmaurer.imtqy.com/angularjs-nvd3-directives/line.chart.html

0

More articles:


All Articles