javascript D3js - 使用 d3.json 从“JSON 数据”输入获取绘制的折线图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22316866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3js - Getting a line chart drawn, from "JSON data" input using d3.json
提问by Nevin Madhukar K
I recently started studying D3.js and came across some issues.. Here's what i have tried out so far :
我最近开始学习 D3.js 并遇到了一些问题..这是我迄今为止尝试过的：
Here's my JS:
这是我的 JS：
d3.json("../js/sample2.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.attr("border", "black")
var group = canvas.append("g")
.attr("transform", "translate(100,10)")
var line = d3.svg.line()
.x(function(d, i) {
return data[0].position[i];
})
.y(function(d, i) {
return data[1].position[i];
});
var line1 = d3.svg.line()
.x(function(d, i) {
return data[2].position[i];
})
.y(function(d, i) {
return data[3].position[i];
});
var j = 0;
group.selectAll("path")
.data(data).enter()
.append("path")
// Have to provide where exaclty the line array is ! (line(array))
.attr("d", line(data[j].position))
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 3);
var group2 = group.append("g")
.attr("transform", "translate(100,10)")
group2.selectAll("path")
.data(data).enter()
.append("path")
// Have to provide where exaclty the line array is ! (line(array))
.attr("d", line1(data[j].position))
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 3);
});
Here's my JSON file:
这是我的 JSON 文件：
[ {"name": "x1",
"position":[40,60,80,100,200]
},
{"name": "y1",
"position":[70,190,220,160,240]},
{"name": "x2",
"position":[40,60,80,100,200]
},
{"name": "y2",
"position":[20,90,20,60,40]}
]
I want the line to be displayed from the data that is retrieved from the JSON file.I actually got the output,
This is my current output that am receiving:
我希望从JSON 文件中检索到的数据显示该行。我实际上得到了输出，这是我当前接收的输出：
But the problem is ,i want this to be more dynamic. Like for example if there is more datawithin the JSON.
但问题是，我希望它更具动态性。例如，如果JSON 中有更多数据。
The JSON could go from x1,y1 to xn,yn...(Similar to the format in the JSON above)
JSON 可以从 x1,y1 到 xn,yn...（类似于上面 JSON 中的格式）
[ {"name": "x1",
"position":[40,60,80,100,200]
},
{"name": "y1",
"position":[70,190,220,160,240]
},
{"name": "x2",
"position":[40,60,80,100,200]
},
{"name": "y2",
"position":[20,90,20,60,40]}
.
.
.
.
{"name": "xn",
"position":[40,60,80,100,200]
},
{"name": "yn",
"position":[20,90,20,60,40]}]
So my issues related to this are :
所以我与此相关的问题是：
- How can this be made dynamic(ie: Irrespective of the amount of data within the JSON,it should reflect on the chart with the required graphs)
- Is the data format of the JSONthat is inputted to the D3js using D3.jsongonna be a problem? (Or what exactly is the format required for the D3.json and is it strict?)
- 如何使其动态化（即：无论 JSON 中的数据量如何，它都应反映在具有所需图形的图表上）
- 是的JSON的数据格式，即利用输入到D3js D3.json会成为一个问题？（或者 D3.json 所需的格式究竟是什么，是否严格？）
采纳答案by Gilsha
Let your json data structure be like this
让你的json数据结构变成这样
[
[
{
"x":40,
"y":70
},
{
"x":60,
"y":190
},
{
"x":80,
"y":220
},
{
"x":100,
"y":160
},
{
"x":200,
"y":240
}
],
[
{
"x":40,
"y":20
},
{
"x":60,
"y":90
},
{
"x":80,
"y":20
},
{
"x":100,
"y":60
},
{
"x":200,
"y":40
}
]
]
Code
代码
d3.json("data.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.attr("border", "black")
var group = canvas.append("g")
.attr("transform", "translate(100,10)")
var line = d3.svg.line()
.x(function(d, i) {
return d.x;
})
.y(function(d, i) {
return d.y;
});
group.selectAll("path")
.data(data).enter()
.append("path")
.attr("d", function(d){ return line(d) })
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 3);
});
This is the right way of creating a multi line chart. Whatever the data format you get from json, you can convert it to the required format using Javascript array functions. You can also use Underscore.js for easy processing.
这是创建多折线图的正确方法。无论您从 json 获得何种数据格式，您都可以使用 Javascript 数组函数将其转换为所需的格式。您还可以使用 Underscore.js 进行轻松处理。
回答by Nidhin S G
let the JSON file be like this
让JSON文件像这样
[
"line": [
{"name": "x1",
"position":[40,60,80,100,200]
},
{"name": "y1",
"position":[70,190,220,160,240]
},
.
.
.
.
.
]
]
and get the length of this "line" run it in a forloop.. hope that will solve
并获取此“行”的长度在 forloop 中运行它.. 希望能解决
