D3JS折线图倒置问题答案

【问题标题】：D3JS line chart inverted issueD3JS折线图倒置问题
【发布时间】：2014-03-20 10:33:33
【问题描述】：

我正在尝试根据输入的 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 数据输入）

【问题讨论】：

您能否编辑您的问题以包含您的期望？不清楚。
更新了，输入的json数据已经图形化了，但是图形是倒置的……

标签： javascript json d3.js linechart

【解决方案1】：

您忘记使用已定义的比例尺，因此使用 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，了解我认为您所期待的。

【讨论】：