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

Question

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

Function findPos(ByVal strFind As String, _
                 ByVal strContent As String, _
                 Optional ByVal sDelimiter As String = "/") As Long

    'strFind is the substring you're searching for
    'strContent is the string you're looking in for strFind
    'Be default sDelimiter is '/' but it can be specified as something else

    Dim varSection As Variant
    Dim i As Long

    'Check if strFind exists in strContent by itself with the delimiter
    If InStr(1, sDelimiter & strContent & sDelimiter, sDelimiter & strFind & sDelimiter, vbTextCompare) > 0 Then
        'It exists, loop through delimited sections of strContent to return the position
        For Each varSection In Split(strContent, sDelimiter)
            i = i + 1   'Increase section count
            If varSection = strFind Then    'Check for match
                'Match found, return position and exit for loop
                findPos = i
                Exit For
            End If
        Next varSection
    Else
        'No match found, return 0
        findPos = 0
    End If

End Function

但它实际上并没有绘制任何东西。我正在给jsfiddle帮助你理解。 http://jsfiddle.net/1b0gn0r2/。 jsfiddle没有很好的组织，但它包含我的代码，我使用的csv数据位于底部。任何人都可以帮我找到错误吗？ 在我的实际代码中输出如下

Answer 1

丢失各种内容（例如margin，height，width，其他变量，CSS等）会让您回答问题非常痛苦。

首先，如果您与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和{{1你之前定义的那些。

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

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