Question

我正在实现d3.js中的图表，我怎样才能“提取”使用支路对象的支流示例到HTML和Javascript代码中。下面是我正在尝试做的代码，但还没有获得成功。

我有外部JSON文件sample.json，我需要将其用于图表数据。错误显示forEach不是函数。我很困惑该怎么做。

请找到我的jsFiddle以获取整个代码。

// loading sample.json
d3.json("sample.json", function(sample2) {

//var svg = d3.select("body").append("svg");

// date manipulation to format UTC to js Date obj
sample2.forEach(function(d) { d.time = new Date(d.time * 1000); });

// helpers and constants
var margin = {"top": 50, "right": 100, "bottom": 56, "left": 50};
var width = 930 - margin.right - margin.left;
var height = 582 - margin.top - margin.bottom;
var timeFormat = d3.time.format("%c");
var X = width/sample2.length*0.25;

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="inlet.js"></script>
    <link src="style.css" />
</head>
<body>
</body>
</html>

请让我知道我的代码出了什么问题。这是我的小提琴http://jsfiddle.net/wLrdgt89/1/

Answer 1

您需要解决这些问题：

问题：1

{"sample2": [ {"time": 1387212120, "open": 368, "close": 275, "high": 380, "low": 231}, {"time": 1387212130, "open": 330, "close": 350, "high": 389, "low": 310}, {"time": 1387212570, "open": 395, "close": 253, "high": 438, "low": 213} ]}

你的json是一个对象，而不是一个数组，所以forEach不起作用。你需要做这样的事情：

d3.json("sample.json", function(sample2) { 
sample2= sample2.sample2

Problem2 你的html主体没有svg所以你需要附加它：

var canvas = d3.select("svg")//this is wrong

var canvas = d3.select("body").append("svg")//add svg to the body

工作代码here

希望这有帮助！

“导出”利用支流对象的支流例子 - d3.js

1 个答案: