Question

我是D3和NVD3的新手。我正在ASP.NET中构建一个Web服务，我也尝试使用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重现一个例子，但不能正常工作

1 个答案: