Question

如果这是一个非常基本的问题，请提前道歉。

我正在阅读这本关于D3，互联网数据可视化Web，一个JavaScript库的书 http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data

我发现它是一本好书，因为我仍然是这个东西的新手。

在下面的代码和demo here中，据我所知，我可以调用“d”任何内容，它仍会引用“数据集”数组。

无论如何我的问题在下面的例子中是如何引用数据集数组？如果我有另一个我想引用的数组呢？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A simple scatterplot with SVG</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 100;

            var dataset = [
                            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                          ];

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    alert(d); //d here can be anything here EG "p" --> still not sure how it relates to dataset --> what if I had another array that I wanted to reference??-->  
                    return d[0];  //return the 0th element
               })
               .attr("cy", function(d) {
                    return d[1];    //return the 1th element
               })
               .attr("r", 5);

        </script>
    </body>
</html>

Answer 1

那是一个很好的问题。首先，让我们看看你在该代码中做了什么。第一部分涉及选择DOM的body元素并附加svg容器，该容器位于此片段中：

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

接下来，根据数据创建svg圈，在本例中为变量数据集。这是在这个片段中完成的：

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")

然后，您可以在圈子中为其他代码提供一些属性。

所以你的问题是如何在data(dataset)行回答 d 引用你的数据集。这一行说，使用变量数据集并将其绑定到圆圈。因此，如果你有另一个名为Hattrick的数据集，你只需在data(dataset)中用Hattrick替换数据集。

我建议你看看Mike Bostock的这些教程Thinking with Joins和How Selections Work以及Scott Murray的优秀书籍。如果您还没有找到它们，您可能也会对Scott的在线tutorials感兴趣。

D3库+ Javascript +功能

1 个答案: