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分组，其中包含行数组与每所学校相关。

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>

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

1 个答案: