D3庫+ Javascript +函數
[英]D3 library + Javascript + function
問題描述
如果這是一個非常基本的問題，請提前道歉。
我正在閱讀有關D3，Web交互式數據可視化，JavaScript庫的這本書
http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data
我覺得這本書不錯，因為我仍然是新手。
在下面的代碼和此處的 demo中，據我所知，我可以稱呼“ d”任何東西，它仍將引用“ dataset”數組。
無論如何，我的問題在下面的示例中如何將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>
1 個解決方案
解決方案1
0 已采納 2013-09-26 03:57:58
好，這是一個好問題。 首先讓我們檢查一下您在該代碼中的工作。 第一部分涉及選擇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")
然后，在其余的代碼中為圓賦予一些屬性。
所以，你的問題是如何為D參考你的數據集是在回答data(dataset)線。 這行說，使用變量數據集並將其綁定到圓上。 因此，如果您有另一個名為Hattrick的數據集，則只需在data(dataset)中用Hattrick替換數據data(dataset) 。
我建議您看看Mike Bostock和Scott Murray的出色著作中的這些教程《 用聯接思考和選擇如何工作 》。 如果您尚未找到Scott的在線教程，可能還會對它們感興趣。
Javascript 庫 d3 調用函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.