Question

我刚刚开始使用D3并使用.CSV文件创建了我的第一个条形图。

csv文件如下所示：

"browser","marketshare"
"firefox", 20
"IE", 45
"Chrome", 30
"opera", 5

使用以下代码为我的矩形将导致4个矩形，高度为20,45,30,5

.attr("height", function(d) { return d.marketshare; });

现在我的文件略有不同

"browser","2001","2002","2003","2004"
"firefox",20,19,22,25
"IE", 45,40,39,35
"Chrome", 30,33,35,37
"opera", 5,4,5,4

我想要做的是创建5个单独的条形图，一个用于Firefox，IE，Chrome和Opera。让我们说我想为firefox创建一个。如何更改：function（d），以便它将为2001,2002,2003,2004创建rectanlges，并且仅用于firefox。

非常感谢任何帮助

提前致谢！

Answer 1

虽然您可以通过仅更改attr函数中的逻辑来实现此目的，但在此之前划分数据会更加清晰。您需要四个数组（每个浏览器一个），每个数组只包含高度值。

您就是这样做的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Data Sort</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script type="text/javascript" src="scripts/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var browsers = [];
    var w = 500;
    var h = 100;
    var barPadding = 3;
    d3.csv("data/browsers.csv",
            function(error, rows) {
                rows.forEach(function(r) {
                    browsers.push({
                        name: r.browser,
                        values: [r['2001'], r['2002'], r['2003'], r['2004']]
                    })
                });
                browsers.forEach(function(b){
                    render(b);
                });
            });

    function render(browser) {
        var svg = d3.select("body").append("svg")
                .attr("width", w)
                .attr("height", h);

        svg.selectAll("rect")
                .data(browser.values)
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                    return i * (w / browser.values.length);
                })
                .attr("y", function(d) {
                    return parseInt(h - d);
                })
                .attr("width", (w / browser.values.length) - barPadding)
                .attr("height", function(d) {
                    return parseInt(d);
                })
                .attr("fill", function(d, i) {
                    var rgbColor = "rgb(" + Math.round((Math.random()*255)) +
                            ", " + Math.round((Math.random()*255)) + ", "  +
                            Math.round((Math.random()*255)) + ")";
                    return rgbColor;
                });

        // Add a label to each SVG.
        svg.append("text").text(browser.name).attr({"x": 0, "y": 30});

        // NOTE THIS RENDER FUNCTION IS MISSING THE UPDATE AND EXIT PHASES. WE
        // ARE DOING EVERYTHING IN THE ENTER PHASE - WHICH MEANS IT WILL ONLY
        // WORK ON STATIC DATA.
    }

</script>

</body>

</html>

D3：如何使用csv文件逐行创建条形图

1 个答案: