Question

我想用d3.js绘制多线图我有以下数据，我从数据库获得并转换为JSON。

{"items":["itemID01","itemID12","itemID14","itemID15","itemID16"],
 "alpha":{
    "xvalue":["itemID03","itemID12","itemID14","itemID16"],
    "yvalue":[0,0,0,0]},
 "beta":{
    "xvalue":["itemID03","itemID12","itemID16"],
    "yvalue":[0,2,0]},
 "gamma":{
    "xvalue":["itemID03","itemID12","itemID14","itemID16"],
    "yvalue":[9,10,8,9]},
 "delta":{
    "xvalue":["itemID12","itemID14","itemID16"],
    "yvalue":[2,0,2]},
 "epsilon":{
    "xvalue":["itemID12"],
    "yvalue":[3]}}

我用一条线来工作。当我将其调整为多行时，它根本不显示任何行。该代码基于d3noob http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html

的本教程

这是我的javascript代码：

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangePoints([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// get the JSON data
d3.json("getdata.php", function(error, data) {
    //console.log(data);
    x.domain(data.items);
    y.domain([0, d3.max(d3.values(data.gamma.yvalue))]); 
    // hardcoded for now, use d3.max(data, function(d) { return Math.max(d.alpha.yvalue, d.beta.yvalue, ...); })

    // get the array keys
    var keys = [];
    for (var key in data){
        if (data.hasOwnProperty(key) && key !== 'items') {
            keys.push(key);
        }
    }

    //console.log(keys);

    var valueline = [];
    var i = 0;
    keys.forEach(function(k) {
        valueline[i] = d3.svg.line()
        //.defined(function(d) { return (d.xvalue !== null); })
        .x(function(d) { return x(d.xvalue); })
        .y(function(d) { return y(d.yvalue); });

        // Add the valueline path.
        svg.append("path")    
            .attr("class", "line")
            .attr("d", valueline[i](data[k]));
        //console.log(data[k]);
        i++;
    });


    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(-10,0)")
        .call(yAxis);
});

我使用代码http://jsfiddle.net/5PcPU/

设置了一个jsfiddle

我尝试了将svg.append（“path”）放入和放出foreach循环以及只有一个valueline元素或数组的不同变体。但到目前为止没有任何工作

我的猜测是错误接近那些行

.x(function(d) { return x(d.xvalue); })
.y(function(d) { return y(d.yvalue); });

因为如果我尝试这样做，我就不会得到任何输出

.x(function(d) { 
     console.log('test'); 
     console.log(d.xvalue);
     return x(d.xvalue); })

Answer 1

我可以通过重新排列json数据来使其工作。如果我使用x和y值的数组而不是一个数组用于x值而另一个数组用于y值，它会像我期望的那样绘制。所以data看起来像这样：

{"items":["itemID01","itemID12","itemID14","itemID15","itemID16"],
 "alpha":[{"x":"itemID03","y":0},
          {"x":"itemID12","y":0},
          {"x":"itemID14","y":0},
          {"x":"itemID16","y":0}],
 "beta":[{"x":"itemID03","y":0},
          {"x":"itemID12","y":2},
          {"x":"itemID16","y":0}],
 "gamma":[{"x":"itemID03","y":9},
          {"x":"itemID12","y":10},
          {"x":"itemID14","y":8},
          {"x":"itemID16","y":9}],
 "delta":[{"x":"itemID12","y":2},
          {"x":"itemID14","y":0},
          {"x":"itemID16","y":2}],
 "epsilon":[{"x":"itemID12","y":3}]}

带有d3.js和JSON数据的多线图

1 个答案: