使用路径的 d3 折线图没有显示任何内容

Question

我正在尝试使用 d3.js 绘制一条表示折线图的路径。我正在使用以下代码

    var data;
d3.csv("myfile.csv",function(datagot){data=datagot;});
var format = d3.time.format("%Y/%m/%d %H:%M:%S");
        data.forEach(function (e){
                e.dist = +e.dist;
                e.speed = +e.speed;
                e.lat=+e.lat;
                e.lon=+e.lon;               
                e.dd=format.parse(e.time);
        });


var xScale = d3.time.scale().range([margin.left, width - margin.right]).domain([d3.min(dataset,function(d){return d.dd}),d3.max(dataset,function(d){ return d.dd})]),
                yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([d3.min(dataset,function(d){return d.dist;}),d3.max(dataset,function(d){return d.dist;})]),

                xAxis = d3.svg.axis()
                .scale(xScale).ticks(10).tickFormat(d3.time.format("%H:%M")).tickPadding(2),

               yAxis = d3.svg.axis()
                .scale(yScale).orient("left").tickPadding(5).ticks(5);



        var svg = d3.select("body").append("svg")
              .attr("width", width-50 )
              .attr("height", height -60);

              svg.append("svg:g")
                .attr("class","axis")
                .attr("transform", "translate(0," + (height - margin.bottom) + ")")
                .call(xAxis);
                // x axis label
                svg.append("text")
                .attr("x", width / 2 )
                .attr("y",  height - 60)
                .style("text-anchor", "middle")
                .text("Time");

                svg.append("svg:g")
                .attr("class","axis")
                .attr("transform", "translate(" + (margin.left-10) + ",-90)")
                .call(yAxis);

                // Y axis label
                    svg.append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 15)
                   .attr("x",70- (height / 2))
                   .attr("dy", "1em")
                   .style("text-anchor", "middle")
                   .text("Distance"); 

            // svg.append("g")
              //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     var x = d3.scale.linear()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);
     lineh = d3.svg.line().x(function(d) {
        return x(d.dd);
             }).y(function(d) {
                return y(d.dist);
    });
        var line  = svg.append("g").attr("transform", "translate(" + margin.left + "," + (-margin.top) + ")").selectAll(".hour")
              .data(outputf)
              .enter().append("path")
              //.attr("x", function(d) { return (d.dd.getMinutes())*15 ; })
             // .attr("cx", function(d) { return (d.dd.getMinutes())*10 ; })
              //.attr("y", function(d) { return (d.dist)*50 ; })
             // .attr("cy", function(d) { return height-100-(d.dist)*50 ; })
              //.attr("r",3)
/*              .attr("rx", 2)
              .attr("ry", 2)*/
              .attr("d",lineh)
              .attr("class", "line");

但它实际上并没有策划任何事情。我提供 jsfiddle 来帮助您理解。http://jsfiddle.net/1b0gn0r2/。jsfiddle 组织得不好，但它包含我的代码，我正在使用的 csv 数据位于底部。谁能帮我找出错误吗？在我的实际代码中，输出如下

Answer 1

您的代码中似乎有很多错误！缺少各种东西（例如margin，，，其他变量，CSS等） height，width使得回答你的问题变得非常痛苦。

首先，如果您正在努力使用 jsfiddle，您可能更喜欢Plunker，它可以更轻松地组织您的代码和数据。

我创建了一个与您的代码一起使用的插件：http://plnkr.co/edit/ZEi7U6qQ8pxq06FdDIW6 ?p=preview

...但它涉及相当多的变化，我将尝试总结一下：

加载是异步的，所以这一行：

d3.csv("myfile.csv",function(datagot){data=datagot;});

不会做你期望的事。其余的代码将在没有正确设置的情况下关闭并执行（例如绘制轴）data。因此，您尝试在数据准备好之前划清界限。通过将主代码插入数据加载函数来修复此问题。

定义尺度。您似乎定义了 4 种不同的尺度：

• xScale = d3.time.scale()
• yScale = d3.scale.linear()
• x = d3.scale.linear()
• y = d3.scale.linear()

这会导致稍后的线条绘制功能出现问题（更多问题还会出现）。我已经摆脱x了y这里

线条绘制函数 lineh期望比例为x和y，但我建议使用您之前定义的xScale和。yScale

// line function
lineh = d3.svg.line()
    .x(function(d) {
        return xScale(d.dd); // <- do not use d(d.dd)
    })...

调用线路函数应该以完全不同的方式完成：您的代码：

var line  = svg.append("g")
    .data(outputf)
    .enter().append("path")
    .attr("d",lineh)
    .attr("class", "line");

不确定outputf是什么所以我忽略了它。lineh（定义如何画线）应该用数据调用。我将调用更改为：

var line = svg.append("g")
    .append("path")
    .attr("d", lineh(dataset)) // <- Note the change
    .attr("class", "line");

最后，我重新组织了代码，将一些变量定义放在文件顶部，使其更易于理解。