Question

我的折线图没有显示数据的问题。我的代码基于here。我使用的是WebStorm，我的代码或Chrome中的开发人员工具都没有错误，所以我不知道出了什么问题。

代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

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

    var formatDate = d3.time.format("%d-%b-%y");

    var x = d3.time.scale()
            .range([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 line = d3.svg.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.users); });

    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 + ")");

    d3.csv("lineChart.csv", type, function(error, data) {
        if (error) throw error;

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

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

        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");

        svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);
    });

    function type(d) {
        d.date = formatDate.parse(d.date);
        d.users = +d.users;
        return d;
    }

</script>

CSV：

date, users
6-Mar-15,19
11-Mar-15,12
22-Apr-15,22
29-Apr-15,32
3-May-15,1
6-May-15,9
4-Sep-15,2
8-Sep-15,13
10-Sep-15,147
21-Sep-15,4
1-Oct-15,264
4-Oct-15,114
7-Oct-15,63
12-Oct-15,79

Answer 1

使用静态数据时，您的代码似乎工作正常。因此，您应该使数据在d3.csv方法中正确加载并使用类型函数正确转换。

确保解析date，users为汇总金额。

编辑：尝试加载csv数据，如下所示。

d3.csv("lineChart.csv", function(error, data) {
    data.forEach(function(d) {
      d.date = formatDate.parse(d.date);
      d.users = +d.users;
    });
    ---------------------
    ---------------------
});

＆＃13;

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var formatDate = d3.time.format("%d-%b-%y");

var x = d3.time.scale()
  .range([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 line = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.users);
  });

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 + ")");

var data = [{
  "date": "6-Mar-15",
  "users": 19
}, {
  "date": "11-Mar-15",
  "users": 12
}, {
  "date": "22-Apr-15",
  "users": 22
}, {
  "date": "29-Apr-15",
  "users": 32
}, {
  "date": "3-May-15",
  "users": 1
}, {
  "date": "6-May-15",
  "users": 9
}, {
  "date": "4-Sep-15",
  "users": 2
}, {
  "date": "8-Sep-15",
  "users": 13
}, {
  "date": "10-Sep-15",
  "users": 147
}, {
  "date": "21-Sep-15",
  "users": 4
}, {
  "date": "1-Oct-15",
  "users": 264
}, {
  "date": "4-Oct-15",
  "users": 114
}, {
  "date": "7-Oct-15",
  "users": 63
}, {
  "date": "12-Oct-15",
  "users": 79
}];

data.forEach(function(d) {
  d.date = formatDate.parse(d.date);
  d.users = +d.users;
});

alert(JSON.stringify(data));

x.domain(d3.extent(data, function(d) {
  return d.date;
}));
y.domain(d3.extent(data, function(d) {
  return d.users;
}));

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

＆＃13;

body {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

＆＃13;

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

＆＃13;

Answer 2

问题可以在CSV的标题行中找到。列标题users前面有一个空格字符：

date, users
6-Mar-15,19

d3.csv.parse()会将其转换为包含空格字符的属性d[" users"]。由于已解析数据的对象中没有属性users，因此您的访问者函数type(d)会将+undefined转换为NaN，并将此值指定给d["users"]。< / p>

这符合RFC 4180的规定：

2。 CSV格式的定义


在标题和每条记录中，可能有一个或多个     字段，以逗号分隔。每行应包含相同的内容     整个文件中的字段数。 空间被视为一部分     一个字段，不应该被忽略。最后一个字段      记录后面不能有逗号。

问题的解决方案就像从CSV中删除不需要的空格字符一样简单，同时保持其余字符不变：

date,users
6-Mar-15,19

d3折线图未显示数据 - 基于教程

2 个答案:

2。 CSV格式的定义