0

我在理解 d3.svg.line() 命令如何工作时遇到问题，如果它需要与路径结合使用。
我一直在尝试使用由两列（天、温度）和数值组成的 csv 绘制折线图，​​但我不明白为什么代码没有显示任何内容。

Jsfiddle在这里：http: //jsfiddle.net/UjhjY/

var line = svg.selectAll("line")
                    .data(dataset)
                    .enter()
                    .append("line")
                    .interpolate("linear")
                    .x(function (i) { return xScale(i); })
                    .y(function (d) { return yScale(d[1]); });

        var path = svg.append("path")
            .attr("d", line(dataset))
            .attr("stroke", "blue")
            .attr("stroke-width", 2)
            .attr("fill", "none");

在处理代码时，浏览器只显示 svg 文件。我对现在该做什么一无所知。任何帮助和解释都将不胜感激，因为我几乎阅读了我能找到的关于线路和路径的所有内容，但无法让它发挥作用。

4

1 回答 1

3

您的代码存在一些问题。首先，d3.csv是一个异步回调，你不能像var dataset = d3.csv("line_graph.csv");. 它采用的第二个参数是一个可以访问数据的函数。代码需要看起来像这样。

d3.csv("file.csv", function(error, data) {
  // create graph
});

您可能还希望将从 CSV 解析出来的数据从字符串转换为实际的数据格式，例如数字

data.forEach(function(d) {
  d.temperature = +d.temperature;
});

设置比例时，请确保引用数据的正确部分。你可能想要类似的东西

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) { return d.temperature; })])
    .range([0, height]);

而不是返回d[1]。

然后，要创建线条，您需要一个线条生成器。这将是这样设置的。

var line = d3.svg.line()
  .x(function(d) { return xScale(d.date); })
  .y(function(d) { return yScale(d.temperature); });

然后，您可以像这样使用线生成器来创建路径。

svg.selectAll("path").data(data)
   .enter().append("path")
   .attr("d", line);

这些只是让我印象最深刻的问题。这是一个非常接近您正在寻找的示例。我强烈建议阅读一些教程和示例。

于 2013-10-05T10:35:39.613 回答