我正在玩d3.js绘制如下曲线。以下是在Excel中绘制的。当我试图得到以下结果时,我面临一个问题,我的Y轴数据存在于嵌套数组中,我很难公开它。
使用下面的代码,我可以获得x轴,但每当我尝试使用y轴时,数据都会显示为未定义。
var w = 900;
var h = 180;
var margin = {
'top': 5,
'right': 20,
'bottom': 20,
'left': 50
};
//creating axis
function buildLine(data) {
var xScale = d3.scale.linear()
.domain([100, d3.max(data, function(d) {
return d.spend;
})])
.range([margin.left, w - margin.right], 100);
/*var yScale=d3.scale.linear()
.domain([0,d3.max(data.arr,function(d){return d.y})])
.range([h-padding,10])
.nice();*/ //getting error as it is nested
var xAxisGen = d3.svg.axis().scale(xScale).orient("bottom").ticks(15);
/* var yAxisGen=d3.svg.axis().scale(yScale).orient("left");*/
var svg = d3.select("body").append("svg").attr({
width: w,
height: h
});
/*var yAxis= svg.append("g")
.call(yAxisGen)
.attr("class","axis")
.attr("transorm","translate("+padding+",0)");*/
var xAxis = svg.append("g")
.call(xAxisGen)
.attr("class", "axis")
.attr("transorm", "translate(" + padding + ",0)");
}
d3.json("sample-data.json", function(error, data) {
//check the file loaded properly
if (error) { //is there an error?
console.log(error); //if so, log it to the console
} else { //If not we're golden!
//Now show me the money!
ds = data; //put the data in the global var
}
buildLine(data);
data.forEach(function(jsonData) {
var lineData = d3.range(0, jsonData.spend, 100)
.map(x => [x, jsonData.alpha * (1 - 2.71828 * (-jsonData.beta * x))]);
/* console.log("this is the data:",lineData);*/
//i think line date returns an array with each item in it also an array of 2 items
var arr = [];
for (var i = 0; i < lineData.length; i++) {
arr.push({
x: lineData[i][0],
y: lineData[i][1]
});
}
jsonData.arr = arr;
console.log(jsonData);
});
});
*********数据结构如下******************
所以有一个对象,每个对象都需要有一条线,因此每个对象都有嵌套的数组,它包含x,y,我需要得到Y来构建y.axis。我的大脑现在感觉就像一个棉花糖。
{x: 10000, y: 286.89585120000004}
{x: 10100, y: 288.364809712}
{x: 10200, y: 289.833768224}
{x: 10300, y: 291.30272673600007}
{x: 10400, y: 292.771685248}