前言:

根據影片教學第一步要先會畫線條，其中我在這遇到了問題就是沒有代碼，

經過自己除錯，終於知道原來是紅色部分打錯。

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 畫紅色是因為我那一部分其實是掛在伺服器上，所以要自行改變

效果圖:

參考資料

D3.js tutorial - 15 - The Tree Layout (1/2)

創作者介紹
創作者 程式小試身手 的頭像
程式小試身手

程式小試身手

程式小試身手 發表在 痞客邦 留言(0) 人氣( 1326 )

▲top

請先 登入 以發表留言。

Recommended

你可能也喜歡

為你精選 3 篇值得延伸閱讀的內容

載入推薦文章中...
目前沒有推薦文章