Question

我刚刚开始使用nvd3（和d3），并且正在努力进行对数缩放。

使用线性刻度没有问题，但是使用对数刻度，不绘制条形图和控制台日志：

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

问题：http://plnkr.co/edit/Roe6tiYNDeezDEJHNCwj?p=preview

我的代码：

<!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>

我尝试过添加域名和范围值，但无济于事

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

有什么想法吗？

Answer 1

这对当前版本的D3不起作用，因为日志比例未定义为0，并且NVD3源中有几个0硬编码。您必须修改NVD3源或创建一个复合比例，返回0的有用值才能使其工作。

nvd3 multiBarChart - d3.scale.log

1 个答案: