d3.js學習2----一些基本文字操作
阿新 • • 發佈：2019-01-10
D3.JS
總的來說，D3是這樣一個特殊的JavaScript庫，它利用現有的Web標準，通過更簡單的（資料驅動）方式來製作炫目的視覺化效果。
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
}
</script>
</body>
</html>
D3.js版：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("www.ourd3js.com"); //只用這一句就改了文字內容，但是會閃一下，不是一開始就被改掉，但是我把上面的src地址換成本地的閃的時間短了
</script>
</body>
</html>
其它的一些基本操作：
//選擇<body>中所有的<p>，其文字內容為 www.ourd3js.com，選擇集儲存在變數 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com");
//修改段落的顏色和字型大小
p.style("color","red")
.style("font-size","72px");
1. 如何選擇元素
在 D3 中，用於選擇元素的函式有兩個：
d3.select()：是選擇所有指定元素的第一個
d3.selectAll()：是選擇指定元素的全部
這兩個函式返回的結果稱為選擇集。
var body = d3.select("body"); //選擇文件中的body元素
var p1 = body.select("p"); //選擇body中的第一個p元素
var p = body.selectAll("p"); //選擇body中的所有p元素
var svg = body.select("svg"); //選擇body中的svg元素
var rects = svg.selectAll("rect"); //選擇svg中所有的svg元素
2. 如何繫結資料
D3 有一個很獨特的功能：能將資料繫結到 DOM 上，也就是繫結到文件上。這麼說可能不好理解，例如網頁中有段落元素 <p> 和一個整數 5，於是可以將整數 5 與 <p>繫結到一起。繫結之後，當需要依靠這個資料才操作元素的時候，會很方便。
D3 中是通過以下兩個函式來繫結資料的：
datum()：繫結一個數據到選擇集上
data()：繫結一個數組到選擇集上，陣列的各項值分別與選擇集的各元素繫結
相對而言，data() 比較常用。
例子：
假設現在有三個段落元素如下。
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
接下來分別使用 datum() 和 data()，將資料繫結到上面三個段落元素上。
先用datum()
假設有一字串 China，要將此字串分別與三個段落元素繫結，程式碼如下：
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 個元素繫結的資料是 " + d;
});
結果：
第 0 個元素繫結的資料是 China
第 1 個元素繫結的資料是 China
第 2 個元素繫結的資料是 China
在上面的程式碼中，用到了一個無名函式 function(d, i)。當選擇集需要使用被繫結的資料時，常需要這麼使用。其包含兩個引數，其中：
d 代表資料，也就是與某元素繫結的資料。
i 代表索引，代表資料的索引號，從 0 開始。
例如，上述例子中：第 0 個元素 apple 繫結的資料是 China。
再用data()
有一個數組，接下來要分別將陣列的各元素繫結到三個段落元素上。
var dataset = ["I like dogs","I like cats","I like snakes"];
繫結之後，其對應關係的要求為：
Apple 與 I like dogs 繫結
Pear 與 I like cats 繫結
Banana 與 I like snakes 繫結
呼叫 data() 繫結資料，並替換三個段落元素的字串為被繫結的字串，程式碼如下：
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
這段程式碼也用到了一個無名函式 function(d, i)，其對應的情況如下：
當 i == 0 時， d 為 I like dogs。
當 i == 1 時， d 為 I like cats。
當 i == 2 時， d 為 I like snakes。
此時，三個段落元素與陣列 dataset 的三個字串是一一對應的，因此，在函式 function(d, i) 直接 return d 即可。
結果自然是三個段落的文字分別變成了陣列的三個字串。
I like dogs
I like cats
I like snakes
總的來說，D3是這樣一個特殊的JavaScript庫，它利用現有的Web標準，通過更簡單的（資料驅動）方式來製作炫目的視覺化效果。
先來看一下helloworld的實現----從HTML到javascript到d3.js的改進：
Html版：
<html><head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
Javascript版：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
}
</script>
</body>
</html>
D3.js版：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("www.ourd3js.com"); //只用這一句就改了文字內容，但是會閃一下，不是一開始就被改掉，但是我把上面的src地址換成本地的閃的時間短了
</script>
</body>
</html>
其它的一些基本操作：
//選擇<body>中所有的<p>，其文字內容為 www.ourd3js.com，選擇集儲存在變數 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com");
//修改段落的顏色和字型大小
p.style("color","red")
.style("font-size","72px");
1. 如何選擇元素
在 D3 中，用於選擇元素的函式有兩個：
d3.select()：是選擇所有指定元素的第一個
d3.selectAll()：是選擇指定元素的全部
這兩個函式返回的結果稱為選擇集。
var body = d3.select("body"); //選擇文件中的body元素
var p1 = body.select("p"); //選擇body中的第一個p元素
var p = body.selectAll("p"); //選擇body中的所有p元素
var svg = body.select("svg"); //選擇body中的svg元素
var rects = svg.selectAll("rect"); //選擇svg中所有的svg元素
2. 如何繫結資料
D3 有一個很獨特的功能：能將資料繫結到 DOM 上，也就是繫結到文件上。這麼說可能不好理解，例如網頁中有段落元素 <p> 和一個整數 5，於是可以將整數 5 與 <p>繫結到一起。繫結之後，當需要依靠這個資料才操作元素的時候，會很方便。
D3 中是通過以下兩個函式來繫結資料的：
datum()：繫結一個數據到選擇集上
data()：繫結一個數組到選擇集上，陣列的各項值分別與選擇集的各元素繫結
相對而言，data() 比較常用。
例子：
假設現在有三個段落元素如下。
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
接下來分別使用 datum() 和 data()，將資料繫結到上面三個段落元素上。
先用datum()
假設有一字串 China，要將此字串分別與三個段落元素繫結，程式碼如下：
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 個元素繫結的資料是 " + d;
});
結果：
第 0 個元素繫結的資料是 China
第 1 個元素繫結的資料是 China
第 2 個元素繫結的資料是 China
在上面的程式碼中，用到了一個無名函式 function(d, i)。當選擇集需要使用被繫結的資料時，常需要這麼使用。其包含兩個引數，其中：
d 代表資料，也就是與某元素繫結的資料。
i 代表索引，代表資料的索引號，從 0 開始。
例如，上述例子中：第 0 個元素 apple 繫結的資料是 China。
再用data()
有一個數組，接下來要分別將陣列的各元素繫結到三個段落元素上。
var dataset = ["I like dogs","I like cats","I like snakes"];
繫結之後，其對應關係的要求為：
Apple 與 I like dogs 繫結
Pear 與 I like cats 繫結
Banana 與 I like snakes 繫結
呼叫 data() 繫結資料，並替換三個段落元素的字串為被繫結的字串，程式碼如下：
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
這段程式碼也用到了一個無名函式 function(d, i)，其對應的情況如下：
當 i == 0 時， d 為 I like dogs。
當 i == 1 時， d 為 I like cats。
當 i == 2 時， d 為 I like snakes。
此時，三個段落元素與陣列 dataset 的三個字串是一一對應的，因此，在函式 function(d, i) 直接 return d 即可。
結果自然是三個段落的文字分別變成了陣列的三個字串。
I like dogs
I like cats
I like snakes