D3库+ Javascript +函数

Question

Apologies in advance if this is a very basic question. 如果这是一个非常基本的问题，请提前道歉。

I am reading through this book on D3, Interactive Data Visualization for the Web, a JavaScript library 我正在阅读有关D3，Web交互式数据可视化，JavaScript库的这本书
http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data

I find it a good book as I am still a novice at this stuff. 我觉得这本书不错，因为我仍然是新手。

In the code below, and demo here , as i understand it I can call "d" anything and it will still reference the "dataset" array. 在下面的代码和此处的 demo中，据我所知，我可以称呼“ d”任何东西，它仍将引用“ dataset”数组。

Anyhow my question is in the example below how is d referenced to the dataset array? 无论如何，我的问题在下面的示例中如何将d引用到数据集数组？ And what if I had another array that I wanted to reference? 如果我要引用另一个数组怎么办？

<!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

Well that's a good question. 好，这是一个好问题。 First lets go through what your doing in that code. 首先让我们检查一下您在该代码中的工作。 The first part involves selecting the body element of the DOM and appending a svg container, that's in this snippet: 第一部分涉及选择DOM的body元素并附加一个svg容器，该容器位于以下片段中：

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

Next your creating svg circles based on the data, which in this case the variable dataset. 接下来，您将根据数据（在本例中为变量数据集）创建svg圆。 That's done in this snippet: 这是在以下代码段中完成的：

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

You then give the circles some attributes in the rest of the code. 然后，在其余的代码中为圆赋予一些属性。

So your question how is d referenced to your dataset is answered in the data(dataset) line. 所以，你的问题是如何为D参考你的数据集是在回答data(dataset)线。 This line says, use the variable dataset and bind it to the circles. 这行说，使用变量数据集并将其绑定到圆上。 So if you had another dataset called Hattrick you would simply replace dataset with Hattrick in data(dataset) . 因此，如果您有另一个名为Hattrick的数据集，则只需在data(dataset)中用Hattrick替换数据data(dataset) 。

I'd suggest that you have a look at these tutorials Thinking with Joins and How Selections Work both by Mike Bostock as well as Scott Murray's excellent book. 我建议您看看Mike Bostock和Scott Murray的出色著作中的这些教程《用联接思考和选择如何工作》。 You might also be interested in Scott's on-line tutorials if you haven't already found them. 如果您尚未找到Scott的在线教程，可能还会对它们感兴趣。

D3库+ Javascript +函数

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-26 03:57:58

D3库+ Javascript +函数

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-26 03:57:58

解决方案1
0 已采纳 2013-09-26 03:57:58