[英]Multiple lines with d3.js
我正在嘗試使用d3.js繪制多條折線圖,但我不明白。
這是我的console.log(data):
Array
(
[0] => [{"x":"0","y":"35"},{"x":"1","y":"34"},{"x":"2","y":"36"},{"x":"3","y":"35"},{"x":"4","y":"40"},{"x":"5","y":"35"},{"x":"6","y":"37"},{"x":"7","y":"40"},{"x":"8","y":"45"},{"x":"9","y":"46"},{"x":"10","y":"55"},{"x":"11","y":"63"},{"x":"12","y":"61"},{"x":"13","y":"45"},{"x":"14","y":"48"},{"x":"15","y":"49"},{"x":"16","y":"45"},{"x":"17","y":"44"},{"x":"18","y":"52"},{"x":"19","y":"43"},{"x":"20","y":"37"},{"x":"21","y":"36"},{"x":"22","y":"37"},{"x":"23","y":"34"}]
[1] => [{"x":"0","y":"10"},{"x":"1","y":"15"},{"x":"2","y":"13"},{"x":"3","y":"15"},{"x":"4","y":"14"},{"x":"5","y":"16"},{"x":"6","y":"17"},{"x":"7","y":"25"},{"x":"8","y":"23"},{"x":"9","y":"24"},{"x":"10","y":"25"},{"x":"11","y":"28"},{"x":"12","y":"27"},{"x":"13","y":"21"},{"x":"14","y":"23"},{"x":"15","y":"19"},{"x":"16","y":"18"},{"x":"17","y":"16"},{"x":"18","y":"15"},{"x":"19","y":"14"},{"x":"20","y":"15"},{"x":"21","y":"16"},{"x":"22","y":"15"},{"x":"23","y":"16"}]
[2] => [{"x":"0","y":"45"},{"x":"1","y":"49"},{"x":"2","y":"49"},{"x":"3","y":"50"},{"x":"4","y":"54"},{"x":"5","y":"51"},{"x":"6","y":"54"},{"x":"7","y":"65"},{"x":"8","y":"68"},{"x":"9","y":"70"},{"x":"10","y":"80"},{"x":"11","y":"91"},{"x":"12","y":"88"},{"x":"13","y":"66"},{"x":"14","y":"71"},{"x":"15","y":"68"},{"x":"16","y":"63"},{"x":"17","y":"60"},{"x":"18","y":"67"},{"x":"19","y":"57"},{"x":"20","y":"52"},{"x":"21","y":"52"},{"x":"22","y":"52"},{"x":"23","y":"50"}]
[3] => [{"x":"0","y":"10"},{"x":"1","y":"15"},{"x":"2","y":"12"},{"x":"3","y":"5"},{"x":"4","y":"9"},{"x":"5","y":"15"},{"x":"6","y":"45"},{"x":"7","y":"125"},{"x":"8","y":"345"},{"x":"9","y":"256"},{"x":"10","y":"312"},{"x":"11","y":"345"},{"x":"12","y":"299"},{"x":"13","y":"165"},{"x":"14","y":"354"},{"x":"15","y":"368"},{"x":"16","y":"254"},{"x":"17","y":"213"},{"x":"18","y":"312"},{"x":"19","y":"165"},{"x":"20","y":"54"},{"x":"21","y":"32"},{"x":"22","y":"10"},{"x":"23","y":"5"}]
[4] => [{"x":"0","y":"2"},{"x":"1","y":"3"},{"x":"2","y":"2"},{"x":"3","y":"1"},{"x":"4","y":"1"},{"x":"5","y":"2"},{"x":"6","y":"3"},{"x":"7","y":"15"},{"x":"8","y":"45"},{"x":"9","y":"27"},{"x":"10","y":"40"},{"x":"11","y":"42"},{"x":"12","y":"35"},{"x":"13","y":"18"},{"x":"14","y":"42"},{"x":"15","y":"40"},{"x":"16","y":"30"},{"x":"17","y":"25"},{"x":"18","y":"40"},{"x":"19","y":"20"},{"x":"20","y":"6"},{"x":"21","y":"4"},{"x":"22","y":"2"},{"x":"23","y":"1"}]
)
如您所見,[0]至[4]是5條不同的線,x是小時的x軸,y是數據。
這是我插入繪圖代碼的js(如您所見,我從php文檔調用程序dataOutEvo.php獲取數據)
$(document).ready(function(){
$.ajax({
url: 'dataOutEvo.php',
success: function(data) {
// -------- HERE -----------
}
});
});
實際上,我應該使用d3.js還是另一個庫,該庫可以執行多行和堆疊的條(稍后將需要)並且可以輕松使用我的數據格式?
幾天前,我正在研究類似的問題。 看看這個JSFiddle,讓我知道您的想法。 我試圖對其進行注釋,但是我不想花太多時間解釋自己。
這是關鍵部分:
//Create our SVG object.
var svg = d3.select("body").append("svg")
.attr("id", "svgdiv")
.attr("width", width+70)
.attr("height", height+70)
.append("g")
.attr("transform", "translate(" + 30 + "," + 30 + ")");
//Call the Axis constructors and append them to the SVG object
svg.append("g")
.attr("class", "xaxis axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxisConstructor);
svg.append("g")
.attr("class", "yaxis axis")
.call(yAxisConstructor);
//Join the different arrays in var data to a new set of tags each classed as ".lines".
var topic = svg.selectAll(".lines")
.data(data)
.enter().append("g");
//Go through an array of ".lines" and append the different attributes, including "d" which determines the line's path.
topic.append("path")
.attr("class", "topicline")
.attr("d", lineConstructor)
.style("stroke", function(d,i) { return colorscale(i); })
.style('stroke-width', 3)
.style('fill-opacity', 0);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.