Question

我已将JSON从视图中的那些模型解析为JsonResponse，现在我正在尝试使用d3.js工作的多线图。

我尝试使用的示例代码是here。

我不知道如何更改tsv调用或者是否应该更改我的JSON格式。

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

以下是我的JSON的格式，其中Site名称是最高级别，而“公制”是一级深度。

{ "Site1": 
        [{"da": 1.0, "date": 2015-09-01},
         {"da": 2.0, "date": 2015-09-04}],
  "Site2":
        [{"da": 1.0, "date": 2015-09-01},
         {"da": 2.0, "date": 2015-09-04}
         {"da": 5.0, "date": 2015-09-04}]
}

如何设置d3.js以使用这些嵌套的JSON对象而不是示例中的顶级JSON？

Answer 1

这是完整的工作代码小提琴;我在代码中添加了注释，以帮助您理解代码。

Fiddle

完整的代码段：

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

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale()
    .range([0, width]);

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

var color = d3.scale.category10();

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

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

var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.da);
});

var svg = d3.select("body").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 + ")");
//your dataset
var myData = {
    "Site1": [{
        "da": 1.0,
            "date": "2015-09-01"
    }, {
        "da": 2.0,
            "date": "2015-09-04"
    }],
        "Site2": [{
        "da": 1.0,
            "date": "2015-09-01"
    }, {
        "da": 2.0,
            "date": "2015-09-04"
    }, {
        "da": 5.0,
            "date": "2015-09-04"
    }]
};
//make fulldataset to get the extent of x axis and yaxis
var fullDataSet = []
for (var key in myData) {
    fullDataSet = fullDataSet.concat.apply(fullDataSet, myData[key]);
}
fullDataSet.forEach(function (d) {
    d.date = parseDate(d.date);
    d.da = +d.da;
});
//get the xaxis extent i.e. min max
x.domain(d3.extent(fullDataSet, function (d) {
    return d.date;
}));
//get the yaxis extent i.e. min max
y.domain(d3.extent(fullDataSet, function (d) {
    return d.da;
}));
//make the x axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
//make the y axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("DA ");
//iterate through your nested data and make the line graph
for (var key in myData) {
    makeLine(myData[key], key);
}

//This function will make the line chart
function makeLine(data, title) {
    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .style("stroke", function (d) {
        return color(title);
    }).attr("d", line);
}

d3.js带有JSON的多系列图

1 个答案: