1

我刚开始使用 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]);

有任何想法吗？

4

1 回答 1

3

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

于 2013-10-14T08:17:50.343 回答