一、選擇、插入和刪除操作
選擇使用select或者selectAll，分別是選擇一個和選擇全部
append("插入節點")：在選擇集末尾插入元素
insert("插入節點", "選定的元素")：在選擇集前面插入元素
remove()；
上面四個操作是建立在選項集的基礎上的
<body>
<p>apple</p>
<p id="del">Pear</p>
<p>Banana</p>
<script type="text/javascript">
var body = d3.select("body");
body.select("#del").style("color", "green");
var p1 = body.select("p");
p1.style("color", "red");
p1.append("p").text("this is a append element");
body.insert("p", "#del").text("this is a insert element");
body.select("#del").remove();
</script>
</body>二、D3給DOM中數據賦值
datum() 賦值一個數據到選項集中
data() 賦值一個數組到選項集中
示例：
# html代碼：
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>
# JS代碼———使用datum()
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
#JS代碼———使用data()
var dataset = ["I like dogs","I like cats","I like snakes"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
# 執行結果
like dogs
I like cats
I like snakes三、D3比例尺的使用
- 線性比例尺，能將一個連續的區間，映射到另一區間。要解決柱形圖寬度的問題，就需要線性比例尺。
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
//將dataset中最小的值，映射成0;將最大的值，映射成300。
var min = d3.min(dataset);
var max = d3.max(dataset);
//兩個函數能夠求數組的最大值和最小值，是 D3 提供的。
var linear = d3.scale.linear()
//d3.scale.linear()返回一個線性比例尺。
.domain([min, max])
.range([0, 300]);
//domain()和range()分別設定比例尺的定義域和值域
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300- 序數比例尺
//有時候，定義域和值域不一定是連續的。例如，有兩個數組：
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
//我們希望 0 對應顏色 red，1 對應 blue，依次類推。
//但是，這些值都是離散的，線性比例尺不適合，需要用到序數比例尺。
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
//用法與線性比例尺是類似的。柱狀圖+序數比例尺示例：
var width = 300;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//var dataset = [250, 210, 170, 130, 90, 200, 234];
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var rectHeight = 25;
//var svg = body.select("svg");
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y", function(d, i) {
return i * rectHeight;
})
.attr("width", function(d){
return linear(d);
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");注意：enter()數的作用是返回一個新的D3()對象集合，這個集合包含了所有沒有被可視化啊的數據。這是D3將數據與圖形的聯繫定義的一種模式（enter-update-exit）叫作Enter Mode
四、定義座標軸
// 數據
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
// 定義比例尺
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom")
//指定刻度的方向,bottom 表示在座標軸的下方顯示。
.ticks(7); //指定刻度的數量定義了座標軸之後，只需要在 SVG 中添加一個分組元素 ，再將座標軸的其他元素添加到這個 裏即可。代碼如下：
svg.append("g").call(axis);
//在D3中，call() 的參數是一個函數。調用之後，將當前的選擇集作爲參數傳遞給此函數。參考資料：ourd3js.com