我正在尝试使用 NVD3 重现示例，但无法正常工作

Question

我是 D3 和 NVD3 的新手。我正在 ASP.NET 中构建一个网络服务，并且我还尝试使用 NVD3.js 重现以下 stackedArea 示例： http://nvd3.org/examples/stackedArea.html

我的目标是在示例运行后使用存储过程发出 ajax 请求。

我已将示例代码复制并粘贴到我的代码中：

<!DOCTYPE html>
<html>
<head>

    <link href="css/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="scripts/d3.min.js" charset="utf-8"></script>
    <script src="scripts/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

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

<script>
    d3.json('scripts/stackedAreaData.json', function(data) {
        nv.addGraph(function () {
            var chart = nv.models.stackedAreaChart()
                          .x(function (d) { return d[0] })
                          .y(function (d) { return d[1] })
                          .clipEdge(true)
                          .useInteractiveGuideline(true)
            ;

            chart.xAxis
                .showMaxMin(false)
                .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });

            chart.yAxis
                .tickFormat(d3.format(',.2f'));

            d3.select('#chart')
              .datum(d3.read)
                .transition().duration(500).call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
        });
    })
</script>
</body>
</html>

我还保存了示例 json 文件：http://nvd3.org/examples/stackedAreaData.json（在示例中给出）。但是，我已经卡了好久了，还是不行。如果我犯了一个明显的错误，我将非常感谢社区的反馈。非常感谢！

Answer 1

首先，确保您拥有正确版本的库：

d3.v3
nv.d3#1.8.1

其次，将.datum(d3.read)改为.datum(data)。根据 D3 v3.x API refrence d3.read 根本不存在 !

这是一个工作演示：https://jsfiddle.net/w1snyrj4/

我正在尝试使用 NVD3 重现示例，但无法正常工作

I am trying to reproduce an example with NVD3, but not working

javascript

json

d3.js

nvd3.js