尝试动态生成折线图,具体取决于输入的JSON数据:
这是我的 JS 代码:
d3.json("../js/sample2.json", function(data) {
var dataArray = new Array(), k = 0, j = 0, dataArraySize = 0, line, positionNumber,
canvas = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 1000)
.attr("border", "black")
heightScale = d3.scale.linear()
.domain([0, 250])
.range([300, 0]);
widthScale = d3.scale.linear()
.domain([0, 200])
.range([0, 700]);
Yaxis = d3.svg.axis()
.ticks(5)
.scale(heightScale)
.orient("left");
Xaxis = d3.svg.axis()
.ticks(10)
.scale(widthScale)
.orient("bottom");
jsonLength = Object.keys(data).length;
group = canvas.append("g")
.attr("class", "grp")
.attr("transform", "translate(100,10)");
// Conversion of JSON data to appropriate data format
for (j = 0; j < jsonLength; j += 2) {
var innerObjArray = new Array();
positionNumber = Object.keys(data[j].position).length;
for (k = 0; k < positionNumber; k++) {
var obj = {};
obj.x = data[j].position[k];
obj.y = data[j + 1].position[k];
innerObjArray.push(obj);
}
dataArray.push(innerObjArray);
}
console.log(dataArray);
dataArraySize = dataArray.length;
//Graphical representation of the dataArray
line = d3.svg.line()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
for (k = 0; k < dataArraySize; k++) {
d3.select(".grp")
.append("path")
.attr("d", line(dataArray[k]))
// .attr("transform", "translate(100,10)")
.attr("fill", "none")
.attr("stroke", "hsl(" + Math.random() * 360 + ",50%,50%)")
.attr("stroke-width", 3);
console.log(dataArray[k]);
}
group.append("g")
.attr("transform", "translate(0, 300 )")
.call(Xaxis)
group.append("g")
.call(Yaxis)
.attr("transform", "translate(0,0)");
});
我已经给出了
heightScale = d3.scale.linear()
.domain([0, 250])
.range([300, 0]);
我认为这样可行,但它没有。
这是我的 JSON数据:
[{"name": "x1",
"position":[0,60,80,100,200]
},
{"name": "y1",
"position":[0,190,220,160,240]
},
{"name": "x2",
"position":[0,60,80,100,200]
},
{"name": "y2",
"position":[10,90,20,60,40]},
{"name": "x3",
"position":[30,50,70,90,150]
},
{"name": "y3",
"position":[20,160,170,160,150]}]
这是我目前的输出
现在图表从(200,240)位置开始..
图表目前已反转,因为我已经开始第(0,0)行,第一行结束于(200,240),依此类推..(通过JSON数据输入)
答案 0 :(得分:2)
您忘记使用已定义的比例,因此使用svg坐标系(从左上角开始为(0,0))绘制项目。
因此,在定义行时,请使用return widthScale(d.x)
而不是return d.x
等等
line = d3.svg.line()
.x(function(d) {
return widthScale(d.x);
})
.y(function(d) {
return heightScale(d.y);
});
请参阅此JSFiddle了解我的想法。