javascript - 未捕获的类型错误 : Cannot read property 'length' of undefined in d3

Question

我正在尝试在 d3 中制作折线图，x 轴为时间。我在变量中使用 json 数据。我使用 d3.time.format() 函数来格式化时间，但它给了我上述错误。我正在学习 d3，所以请帮忙。我的代码是:

<div id="viz"></div>
<script>

var width = 640;
var height = 480;
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().domain([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var data = [
{ "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
{ "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
{  "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
{ "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 

var line = d3.svg.line()
.x(function(d, i) { return x(d.x_axis); })
.y(function(d, i) { return y(d.y_axis); })
.interpolate("linear");
var vis = d3.select("#viz")
.append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.xAxis = d3.time.format("%d-%b-%y").parse(d.xAxis);
d.yAxis = +d.value;
});

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

vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
vis.append("g")
.attr("class", "y axis")
.call(yAxis);
vis.append("svg:path")
.datum(data)
.attr("class", "line")
.attr("d", line);

Answer 1

您的代码中有几个问题，因此我在下面创建了一个新的代码，并对更改进行了一些评论。

<style>
   /* You need some styling for your line */
    .line{
        stroke:steelblue;
        fill:none
    }
</style>
<script>

    var width = 640;
    var height = 480;
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

    var x = d3.time.scale().range([0, width]);
     // You had a mistake filling the domain structure of your scale.
    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 data = [
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
    {  "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 
    //You were using non existing variables
    var line = d3.svg.line()
        .x(function(d) { return x(d.xAxis); })
        .y(function(d) { return y(d.yAxis); })
        .interpolate("linear");

    var vis = d3.select("#viz")
        .append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
    //You are using ISO format, use the correct time parser
    var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ");
    data.forEach(function(d) {
        d.xAxis = iso.parse(d.at); //You were parsing a non existing variable
        d.yAxis = parseFloat(d.value); //You were parsing a non existing variable
    });
    console.log(data);

     //The variables for the domain were not correct
    x.domain(d3.extent(data, function(d) { return d.xAxis; }));
    y.domain(d3.extent(data, function(d) { return d.yAxis; }));

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

    vis.append("svg:path").datum(data).attr("class", "line").attr("d", line);
</script>

如果有帮助请告诉我