Enter, Update, Exit

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

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

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

Built with blockbuilder.org

forked from shimizu's block: Enter, Update, Exit

<!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>

</body>
</html>

https://unpkg.com/d3@4.12.2/build/d3.min.js