Question

我正在尝试使用csv文件到D3.js的值创建基本折线图。我的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

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

1 个答案: