d3.js學習筆記--Mike Bostock: What makes Software Good?

時間 2019-11-11

標籤 d3.js 學習筆記 mike bostock makes software good 欄目 JavaScript 简体版

原文原文鏈接

enter, update和exit

<svg width="960" height="540">
  <g transform="translate(32,270)">
    <text x="0">h</text>
    <text x="32">e</text>
    <text x="64">l</text>
    <text x="96">l</text>
    <text x="128">o</text>
  </g>
</svg>

這裏實際的數據爲: ["h", "e", "l", "l", "o"]. 咱們須要將實際的數據和<text>相關聯起來. 因此咱們須要如下步驟:javascript

1) 使用data函數將數據綁定到所選擇的DOM元素<text>上.html

2) 使用enter函數進入每一個須要修改的<text>元素.java

3) 更新<text>元素(例如使用attr來更新屬性)數組

4) 使用exit來退出這次的修改.app

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  text {
    font: bold 48px monospace;
  }
  .enter {
    fill: green;
  }
  .update {
    fill: #333;
  }
  svg {
    margin-top: 50px;
  }
</style>

<svg width="960" height="500"></svg>
<script src="d3.js"></script>
<script>
  var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
  var svg = d3.select("svg"),
      width = +svg.attr('width'),
      height = +svg.attr('height'),
      g = svg.append("g").attr('transform', "translate(32," + (height / 2) + ")");

  function update(data) {
    console.log(data);
    var text = svg.selectAll("text")
        .data(data)
        .attr('class', 'update');

    text.enter()
        .append("text")
        .attr('class', 'enter')
        .attr("x", function(d, i) { return i * 32; })
        .attr("dy", ".95em")
        .merge(text)
        .text(function(d) { return d; });

    text.exit().remove();
  }

  update(alphabet);

  d3.interval(function() {
    update(d3.shuffle(alphabet)
        .slice(0, Math.floor(Math.random() * 26))
        .sort());
  }, 5500);
</script>

transition

transition爲過渡, 從選中的當前元素移動到目標元素位置.dom

咱們在界面上顯示hello, 並緩慢的展開其座標x的位置:svg

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  text {
    font: bold 48px monospace;
  }
  svg {
    margin-top: 50px;
    margin-left: 50px;
  }
</style>

<svg width="960" height="500"></svg>
<script src="d3.js"></script>
<script>
  var data = "hello".split(""),
      svg = d3.select('svg'),
      g = svg.append('g'),
      text = g.selectAll('text').data(data);

  text.enter()
      .append('text')
      .transition()
      .duration(2000)
      .attr('dy', function(d, i) { return (i + 1) * 32; })
      .duration(1000)
      .attr('x', function(d, i) { return i * 32; })
      .text(function(d) { return d; });

</script>

1. select用來選中要操做的DOM元素, 而append用來生成新的DOM元素.函數

2. 使用data()函數讀取數組, 這裏須要使用selectAll選取全部的text. 例如數組data有五個元素, 則會生成五個<text>學習

3. 使用transition()開啓過渡功能, 使用duration設定過渡的時間(毫秒)spa

4. 運行程序, 咱們會看到座標x/y在快速的變大, 而後"hello"字母會擴展開來.

仔細查看如上代碼的運行結果會發現, 實際上Y和X的座標變化幾乎是同時的, 而並不是Y軸擴展完畢後, X軸才繼續擴展.

d3.js的做者解釋這種狀況時候, 說兩個看似同步執行, 實際上它們之間的差距就幾毫秒.

若是想要順序執行, 則調用每一次的transition/duration:

text.enter()
      .append('text')
      .transition()
      .duration(2000)
      .attr('dy', function(d, i) { return (i + 1) * 32; })
      .transition()
      .duration(1000)
      .attr('x', function(d, i) { return i * 32; })
      .text(function(d) { return d; });