d3折线图，使用排序的数据集

Question

我正在制作一个非常简单的折线图，但是我无法完全绕过它。 问题出在我的line（）函数上。

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.Wk); })
    .y(function(d) { return y(d.Rk); });

// Get the data
d3.csv("apdata.csv", function(error, data) {
    data.forEach(function(d) {
        d.Rk = +(d.Rk);
        d.Wk = +(d.Wk);
    });

这可以正常工作，但是我的数据没有按照我想要的方式排序。 因此，我使用d3.nest（）对数据进行了如下排序：

    var sortedData = d3.nest()
  .key(function(d){return d.School; })
  .entries(data);

现在，当我将数据转储到控制台中时，数据看起来不错，但是如何根据排序后的数据而不是原始数据来画线。 我尝试将行功能更改为此吗？

 var valueline = d3.svg.line()
 .x(function(d) { return x(sortedData.Arizona.Wk); })
 .y(function(d) { return y(sortedData.Arizona.Rk); });

但这一直告诉我亚利桑那州是不确定的。

我排序的数据如下所示

[{"Arizona":[{Conf: "Pac-12"},{RK:10},{Wk:1}]}] .... etc

我显然很困惑。 任何帮助将非常感激。 初次张贴海报，对不起，如果我违反一些规则。

编辑大家好 ，谢谢您的帮助。 我想我有点头疼。 我想出了如何访问我的sortedData对象，但是现在我需要弄清楚如何用它来画线。

sortedData.forEach(function(d){
  ranks = +(d.values[0].Rk);
  weeks = +(d.values[0].Wk);
});

var valueline = d3.svg.line()
.x(function(d) { return x(ranks);})
.y(function(d) { return y(weeks); });

我没有任何错误，但也没有任何图形。 我感谢你们所有人努力帮助我。 我只是不太了解d3.svg.line（）函数的工作原理。 也许我真正需要的是关于D3折线图的好教程。 特别是多线图？

这是原始的csv。 我觉得这个项目不应该那么难。

http://pastebin.com/YY5YW320

Answer 1

d3.nest（）创建的结果数据结构将创建新记录，其中的关键字段是School分组，而value字段包含与每个学校关联的行的数组。

d3noob创建了一个有关如何创建多折线图的有用示例（ http://bl.ocks.org/d3noob/d8be922a10cb0b148cd5 ）。 运行下面的代码片段，查看一个示例如何将数据插入此代码示例的示例。

 // Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 30, left: 50}, width = 450 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; // Set the ranges var x = d3.scale.linear().range([0, width]); var y = d3.scale.linear().range([height, 0]); // Define the axes var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); // Define the line var valueline = d3.svg.line() .x(function(d) { return x(d.Wk); }) .y(function(d) { return y(d.Rk); }); // Adds the svg canvas 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 + ")"); // Get the data var data = [ {Wk:1,Rk:10,School:"Arizona"}, {Wk:2,Rk:10,School:"Arizona"}, {Wk:3,Rk:8,School:"Arizona"}, {Wk:4,Rk:16,School:"Arizona"}, {Wk:5,Rk:20,School:"Arizona"}, {Wk:1,Rk:1,School:"Duke"}, {Wk:2,Rk:1,School:"Duke"}, {Wk:3,Rk:6,School:"Duke"}, {Wk:4,Rk:5,School:"Duke"}, {Wk:5,Rk:5,School:"Duke"}]; data.forEach(function(d) { d.Rk = +(d.Rk); d.Wk = +(d.Wk); }); // Scale the range of the data x.domain([d3.min(data, function(d) {return d.Wk; }), d3.max(data, function(d) { return d.Wk; })]); y.domain([0, d3.max(data, function(d) { return d.Rk; })]); // Nest the entries by symbol var sortedData = d3.nest() .key(function(d) {return d.School;}) .entries(data); // Loop through each symbol / key sortedData.forEach(function(d) { svg.append("path") .attr("class", "line") .attr("d", valueline(d.values)); }); // 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") .call(yAxis); 

 body { font: 12px Arial;} path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>