D3选择集和数据绑定

D3选择集的使用 D3数据绑定的两种方法

by miSunLaughing

HTML

<h1>前端框架</h1>
<h2>信息</h2>
<p>react</p>
<p>vue</p>
<p>angular</p>

<div id="title"></div>
<div class="content"></div>

<div id="titleData"></div>
<div id="infoData"></div>
<div id="listData"></div>

CSS

p {
  font-size: 16px;
}
#title, .content {
  color: #666;
  font-size: 12px;
}

JavaScript

// 选择集
var $title = d3.select('h1');
d3.select('#title').text($title.text());

var $list = d3.selectAll('p');
d3.select('.content').text('size is ' + $list.size());

var $info = d3.select('h2');

// 数据的绑定
var listData = ['react', 'vue', 'angular'];
var titleData = 'title';
var infoData = ['this', 'is', 'info'];

$title.datum(titleData);
$info.datum(infoData);
$list.data(listData);

// 获取数据
$title.each(function(d){
	d3.select('#titleData').text(d)
});
$info.each(function(d){
	d3.select('#infoData').text(d)
});
$list.each(function(d){
	d3.select('#listData').append('span').text(d + '   ')
});