Question

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

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文件以外的任何内容。而且我对现在该做什么一无所知。任何帮助和解释都会非常感激，因为我几乎可以读到关于线和路径的所有内容，但无法使其正常工作。

Answer 1

您的代码存在一些问题。首先，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]。

然后，要创建该行，您需要line generator。这将设置为这样。

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);

这些只是让我感到震惊的最明显的问题。这是一个example，它非常接近你所寻找的。我强烈建议您阅读一些教程和示例。

线图 - 未显示

1 个答案: