我最近开始研究D3.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);
});
这是我的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]}
]
我希望从JSON文件检索的数据中显示该行。我实际上得到了输出,这是我当前正在接收的输出:
但是问题是,我希望它更具动态性。举例来说,如果JSON中有更多数据。
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]}]
所以我与此有关的问题是:
让您的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
}
]
]
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);
});
这是创建多折线图的正确方法。无论您从json获得什么数据格式,都可以使用Javascript数组函数将其转换为所需的格式。您也可以使用Underscore.js进行轻松处理。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句