Question

我是D3和JS的初学者。我正在尝试使用小型csv文件作为源进行简单的矩形可视化。

price, units
80.67, 100
80.87, 99
79.34, 47

文件，csv在同一个文件夹中。我正在使用Python的SimpleHTTPServer在此文件夹中本地提供服务。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Data</title>
    <script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
    <script type="text/javascript">

        // load csv from the same directory
        d3.csv("test.csv", function (data){

            return {
                        price: +data.price, // convert to number with +
                        units: +data.units, // convert to number with +         
            };

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

            canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function (d) { return d.price; })
                    .attr("height", 48)
                    .attr("y", function (d) { return d.units; })
                    .attr("fill", "blue");

            canvas.selectAll("text")
                .data(data)
                .enter()
                    .append("text")
                    .attr("fill", "white")
                    .attr("y", function (d) { return d.units + 24; })
                    .text( function (d) { return d.units;})


            });



    </script>
</body>

我没有错误，只是一个空白页面。这段代码有什么问题？

Answer 1

你在回调中做的第一件事就是返回。之后没有任何代码被执行。我指的是

return {
                    price: +data.price, // convert to number with +
                    units: +data.units, // convert to number with +         
        };

应该是

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

回调的签名也应该是function(error, data)而不是function(data)。

绘制D3矩形

1 个答案: