这个问题主要关注在d3JS中调用JSON中的嵌套数据。 As a follow up to this question由@meetamit回答,我现在正在为嵌套的JSON添加另一层,但我遇到了脚本(JS Fiddle Here)的问题:
var svgName;
var mainWidth=300;
data=[
{
"params": [
{
"strokeWeight": 1.3,
"xyData": [
{
"x0": 0.34827403080754826,
"x1": 0.60600737245405589,
"x2": 0.72278004152764297,
"x3": 0.46504669988113501,
"x4": 0.34827403080754826,
"y0": 0.41161457968694481,
"y1": 0.60527707639332184,
"y2": 0.36347025679680034,
"y3": 0.16980776009042353,
"y4": 0.41161457968694481
}
]
},
{
"strokeWeight": 6.3,
"xyData": [
{
"x0": 0.19665357021794935,
"x1": 0.41914132668202908,
"x2": 0.54254880649843318,
"x3": 0.32006105003435364,
"x4": 0.19665357021794935,
"y0": 0.39756094992379476,
"y1": 0.56473968639682104,
"y2": 0.30919384295958852,
"y3": 0.14201510648656224,
"y4": 0.39756094992379476
}
]
}
],
"view": "view0"
}
];
data.forEach(function(qx){
qx.points=[]; //this makes two curves merged into one curve. I want two separate rectangles
qx.params.forEach(function(kv){
aspect=1.5;
// qx.points=[]; //this makes one curve
kv.xyData.forEach(function(d) {
for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) {
qx.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]);
}
});
});
});
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = mainWidth - margin.left - margin.right,
height = mainWidth/aspect - margin.top - margin.bottom;
svgName= d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line =
d3.svg.line()
;
svgName.selectAll("path")
.data(data)
.enter()
.append("path")
;
svgName.selectAll("path")
.attr("d", function(d) { return line(d.points); })
.style("stroke-width", function(d){return d.strokeWeight;}) //this isn't working.
.style("fill","none")
.attr("stroke-linecap","round")
.attr("stroke-linejoin","round")
;
现在我必须遗漏一些明显的东西,但是我在使用下面的代码将两个xyData读作不同的曲线时遇到了麻烦。笔划宽度也不适用于参考数据。曲线发生了什么是明确的:两个列表合并为一个列表,这将创建一个连续的路径而不是两个独立的路径。我不确定如何解决笔画宽度问题,所以我很感激任何帮助。
答案 0 :(得分:1)
我没有深入挖掘结构,但问题似乎是,在顶层,你的阵列中只有一个项目。由于您的路径(或路径,恰好是)附加在svgName.selectAll("path").data(data).enter().append("path")
,因此您将为data
中的每个元素生成一个路径,这是一个单元素数组。
如果要为params
中的每个元素生成一个路径,则应使用svgName.selectAll("path").data(data.params)
,因为它具有正确数量的元素,或使用newData = data.params.map(mappingFunction)
创建适当的数组来自data.params
,然后将其用作您的数据。