D3 Examples - Enter, Update, Exit

D3.jsをセレクターを用いた差分レンダリング

D3のセレクターは、単にDOM上に存在しているエレメントを選択するだけでなく、エレメントに束縛したデータをチェックし差分を抽出する機能があります。以下３種類のセレクターを用いることで、jsxのような差分レンダリングを行うことができます。

update - 束縛したデータに対してすでにDOM存在しているエレメントを選択するセレクター enter - これから新たに追加するエレメントを選択するセレクター exit - データの数に対して多すぎるエレメントを選択するセレクター

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="jp">
<head>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
}
    
#chart {
    width: 600px;
    height: 450px;
    border-left: none;
    border-top:none;
    cursor:all-scroll;
}
#chart svg{
    width: 99%;
    height: 99%;
    cursor: default;
}
​
.grid .tick line {
    stroke-dasharray:1;
}
 
 
 .container {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:         row;    
 }
 
#data {
    margin-top: 20px;
}
​
​
#data table {
    width: 300px;
}
#data th {
    color: black;
}
#data td {
    color: white;
}
​
​
#btn {
    width: 100px;
    margin: 0 auto;
    color:white;
    background-color:#666;
    
}
.label {
    margin-left: 40px;
    margin-top: 20px;
}
.label span:before{
    content: "■";
}
.label span:nth-child(1){
    color: blue;
}
.label span:nth-child(2){
    color: green;
}
.label span:nth-child(3){
    color: red;
}
​
</style>
​
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script>    
</head>
<body>
  AJAY
<div class="container">
    <div id="chart" >
        <div  class="label">
        <span>Enter</span>
        <span>Update</span>
        <span>Exit</span>
        </div>
        <svg></svg>
    </div>
    <div id="data">
        <button id="btn">new Data</button>
        <table>
            <thead><tr><th>ID</th><th>X</th><th>Y</th></tr></thead>
            <tbody></tbody>
        </table>
    </div>
</div>
​
<script src="index.js"></script>
​
​
</body>
</html>
    