CODEWITHSUNDEEP
d3.jsnvd3.js
dose
dose

Reputation: 13

nvd3 multiBarChart - d3.scale.log

I'm just starting out with nvd3 (and d3), and am struggling with logarithmic scaling.

With the linear scale there is no problem, but with the log scale, the bars are not drawn and console logs:

Error: Invalid value for <rect> attribute y="NaN"

Problem: http://plnkr.co/edit/Roe6tiYNDeezDEJHNCwj?p=preview

My code:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://rawgithub.com/novus/nvd3/master/src/nv.d3.css">
    <script src="https://rawgithub.com/novus/nvd3/master/lib/d3.v3.js"></script>
    <script src="https://rawgithub.com/novus/nvd3/master/nv.d3.js"></script>
  </head>

  <body>

  <script>
    var chart, chart2;
    var data = [{
      "key": "Test",
      "values":
      [
        {"x": "One", "y": 110},
        {"x": "Two", "y": 6},
        {"x": "Three", "y": 12052 },
        {"x": "Four", "y": 4543},
        {"x": "Five","y": 6069},
        {"x": "Six","y": 3899 }
      ]
    }];

    /*Linear scale*/
    nv.addGraph(function () {
        chart = nv.models.multiBarChart()
                    .showControls(false)
                    .showLegend(false);

        chart.multibar
          .yScale(d3.scale.linear())

        d3.select('#chart svg')
          .datum(data)
          .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    /*Log scale - not working*/
    nv.addGraph(function () {
        chart2 = nv.models.multiBarChart()
                    .showControls(false)
                    .showLegend(false);

        chart2.multibar
          .yScale(d3.scale.log());

        d3.select('#chart2 svg')
          .datum(data)
          .call(chart2);

        nv.utils.windowResize(chart2.update);

        return chart;
    });

  </script>


  <div id="chart">
    <svg></svg>
  </div>

  <div id="chart2">
    <svg></svg>
  </div>

  </body>

</html>

I've tried adding domain and range values, but to no avail

      .yDomain([0, 12500])
      .yRange([50, 0]);

Any ideas?

Upvotes: 1

Views: 1410

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

This doesn't work for the current version of D3 because log scales aren't defined at 0 and there are a couple of 0s hardcoded in the NVD3 source. You would have to either modify the NVD3 source or create a composite scale that returns a useful value for 0 to make this work.

Upvotes: 3

Related Questions