如何使用d3.js从嵌套数组中绘制y轴?

时间:2018-01-11 23:22:11

标签: javascript arrays d3.js

我正在玩d3.js绘制如下曲线。以下是在Excel中绘制的。当我试图得到以下结果时,我面临一个问题,我的Y轴数据存在于嵌套数组中,我很难公开它。

enter image description here

使用下面的代码,我可以获得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);
    });
});

*********数据结构如下******************

enter image description here

所以有一个对象,每个对象都需要有一条线,因此每个对象都有嵌套的数组,它包含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}

0 个答案:

没有答案