前言:
根據影片教學第一步要先會畫線條，其中我在這遇到了問題就是沒有代碼，
經過自己除錯，終於知道原來是紅色部分打錯。
HTML程式碼:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src ="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<h1>我的第三個D3</h1>
<script>
var canvas =d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
var diagonal=d3.svg.diagonal()
.source({x:10,y:10})
.target({x:300,y:300});
canvas.append("path")
.attr("fill","none")
.attr("stroke","black")
.attr("d",diagonal);
</script>
</body>
</html>
--------------------我是分隔線--------------------
會上面的之後就可以開始做資料連接並畫樹
HTML程式碼:
<html>
<head>
<meta charset="UTF-8">
<script src ="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<h1>我的第四個D3</h1>
<script>
var canvas =d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
.append("g")
.attr("transform","translate(50,50)");
var tree=d3.layout.tree()
.size([400,400]);
d3.json("mydata.json",function(data){
var nodes=tree.nodes(data);
var links=tree.links(nodes);
var node =canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class","node")
.attr("transform",function(d){return "translate("+d.y+","+d.x+")";})
node.append("circle")
.attr("r",5)
.attr("fill","steelblue");
node.append("text")
.text(function(d){return d.name;})
var diagonal=d3.svg.diagonal()
.projection(function(d) {return [d.y,d.x];});
canvas.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class","link")
.attr("fill","none")
.attr("stroke","#ADADAD")
.attr("d",diagonal);
})
</script>
</body>
</html>
--------------------我是分隔線--------------------
mydata.json 畫紅色是因為我那一部分其實是掛在伺服器上，所以要自行改變
效果圖:
參考資料
留言列表
美食 (2)
