d3js / epochjs 无法读取未定义的属性 'length'

Question

我真的不知道这里出了什么问题。我尝试使用 JSON-data.

绘制带纪元的折线图

JSON 格式化程序和验证程序说它是有效的 JSON。

Epoch/D3 不呈现图表，而是我在控制台的 d3.js 中得到一个 "Uncaught TypeError: Cannot read property 'length' of undefined"。

我尝试了不同版本的 d3，最新版本以及本期所述的 v3.5.17：https://github.com/epochjs/epoch/issues/226

这是我的代码：

<html>

<head>
    <link rel="stylesheet" href="css/epoch.min.css" type="text/css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/epoch.js"></script>
</head>

<body>
    <div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
    <script type="text/javascript">
        $('#linechart').epoch({
            type: 'line',
            axes: ['left', 'right', 'bottom'],
            data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
        });

    </script>
</body>

Answer 1

快速阅读 documentation 会告诉你 value:

data: [{"label":"LabelA","value":[...

必须是values:

data: [{"label":"LabelA","values":[...

这是包含您更正代码的演示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
        var linechart = $('#linechart').epoch({
            type: 'line',
            axes: ['left', 'right', 'bottom'],
            data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>

d3js / epochjs 无法读取未定义的属性 'length'

d3js / epochjs Cannot read property 'length' of undefined

javascript

jquery

json

epoch

d3.js

d3js / epochjs 无法读取未定义的 属性 'length'

d3js / epochjs Cannot read property 'length' of undefined

javascript

jquery

json

epoch

d3.js

d3js / epochjs 无法读取未定义的属性 'length'