使用D3.js从CSV创建简单的折线图

Question

我正在尝试通过D3.js使用来自csv文件的值创建基本折线图。 我的csv文件设置如下：

Date, Value
1/1/2015, 1
1/2/2015, 2

这是我的JavaScript：

<script>
    d3.csv("data/values.csv", function (data) {

        var canvas = d3.select("p").append("svg")
            .attr("width", 500)
            .attr("height", 500);

        var group = canvas.append("g")
            .attr("transform", "translate(100, 100)");

        var line = d3.svg.line()
            .x(function (d) { return d.Date; })
            .y(function (d) { return d.Value; });   

        group.selectAll("path")
            .data(data)
            .enter()
            .append("path")
                .attr("d", line)
                .attr("fill", "none")
                .attr("stroke", "black")
                .attr("stroke-width", 10);  
    });
</script>

但是，我的网页上什么也没有。 有任何想法吗？ 谢谢

Answer 1

d3 svg.line组件期望您为返回数字的x和y值提供函数。 在您的情况下， x函数返回一个日期：

    var line = d3.svg.line()
        .x(function (d) { return d.Date; })
        .y(function (d) { return d.Value; });   

通常，您将需要使用刻度将这些数字从数据坐标系转换为屏幕坐标系。

var x = d3.time.scale()
    .range([0, width])
    .domain(d3.extent(data, function(d) { return d.Date; }));
var y = d3.scale.linear()
    .range([height, 0])
    .domain(d3.extent(data, function(d) { return d.Value; }));

var line = d3.svg.line()
    .x(function(d) { return x(d.Date); })
    .y(function(d) { return y(d.Value); });

请参阅以下完整示例：

http://bl.ocks.org/mbostock/3883245