D3.js 使用路径的d3折线图未显示任何内容

我正在尝试使用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");

但实际上它并没有策划任何事情。我向你求助，希望你能帮助我理解。JSFIDLE没有很好地组织，但它包含我的代码，我使用的csv数据位于底部。有人能帮我找出错误吗？ 在我的实际代码中，输出如下 您的代码中似乎有很多错误！缺少各种东西（如

边距

、

高度

、

宽度

、其他变量、CSS等），这会让回答问题时非常痛苦

首先，如果您正在努力使用JSFIDLE，您可能会更喜欢它，这样可以更容易地组织代码和数据

我在这里创建了一个与您的代码配合使用的plunk:

…但它涉及了很多变化，我将尝试总结一下：

加载是异步的，因此此行：

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

不会做你期望的事。未正确设置

数据

的情况下，其余代码将消失并执行（如绘制轴）。因此，您尝试在数据准备就绪之前绘制线。通过将主代码插入数据加载函数来修复此问题

定义比例。您似乎定义了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)
    })...

不确定什么是

outputf

，所以我忽略了它<应使用数据调用code>lineh（定义如何绘制线）。我把电话改成：

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

var line=svg.append（“g”）
.append（“路径”）
.attr（“d”，lineh（dataset））/您的代码中似乎有很多错误！缺少各种东西（如
边距
、
高度
、
宽度
、其他变量、CSS等），这会让回答问题时非常痛苦

首先，如果您正在努力使用JSFIDLE，您可能会更喜欢它，这样可以更容易地组织代码和数据

我在这里创建了一个与您的代码配合使用的plunk:

…但它涉及了很多变化，我将尝试总结一下：

加载是异步的，因此此行：

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

不会做你期望的事。未正确设置
数据
的情况下，其余代码将消失并执行（如绘制轴）。因此，您尝试在数据准备就绪之前绘制线。通过将主代码插入数据加载函数来修复此问题

定义比例。您似乎定义了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)
    })...

不确定什么是
outputf
，所以我忽略了它<应使用数据调用code>lineh

（定义如何绘制线）。我把电话改成：

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

var line=svg.append（“g”）
.append（“路径”）
.attr（“d”，lineh（dataset））//是否检查了浏览器控制台中的任何错误？我看到了一些潜在的问题。。。第一个是d3.csv是异步的。您的代码很可能是在csv加载和解析之前执行的。此外，您正在绑定到
outputf
，这似乎在代码的其他任何地方都没有定义。您好，在我的cide中，变量的名称实际上是outputf。抱歉搞混了。但它仍然不起作用没有显示错误，因为很多事情都发生了变化，以2017年为例。您是否检查过浏览器的控制台是否存在任何错误？我看到了一些潜在的问题。。。第一个是d3.csv是异步的。您的代码很可能是在csv加载和解析之前执行的。此外，您正在绑定到
outputf
，这似乎在代码的其他任何地方都没有定义。您好，在我的cide中，变量的名称实际上是outputf。抱歉搞混了。但它仍然不起作用，没有显示任何错误，因为很多事情都发生了变化，以2017年为例。