D3 进入-更新-退出理解

来源：互联网发布：类似英文的拼音域名编辑：程序博客网时间：2024/06/05 21:56

进入-更新-退出是D3可视化的基石

var data = [10,15,24,23,12];

//进入（enter）

d3.select("body").selectAll("div.h-bar")

.data(data)

.enter()

.append("div").attr("class","h-bar").append("span");

//更新（update）

d3.select("body").selectAll("div.h-bar")

.data(data)

.style("width", function(d){

return (d*3) + "px";

})

.select("span")

.text(function(d){

return d;

})

//退出（exit）

d3.select("body").selectAll("div.h-bar")

.data(data)

.exit()

.remove();

D3在相应的DOM元素中添加了一个名为__data__的属性，并通过这个属性将数据和图形联系起来

update() （绑定数据数量==对应元素数量）

当绑定数据数量等于元素数量时，更新元素上面绑定的数据

<body>

<p></p>

</body>

var p = d3.select("body").selectAll('p');

var dataSet = [1];

var p.data(dataSet).text(function(d){return d;});

/*body 选集的p元素数量等于dataSet数据集的数量，data()函数就会更新p中绑定的数据值，不会在body中删除元素或者添加元素*/

</script>

enter() （绑定数据数量>对应元素数量）

当绑定数据数量大于元素数量时，通常需要添加元素，使元素数量与绑定数据的数量相等，后面通常先跟上append操作，然后更新元素上面绑定的数据

<body>

<p>

</body>

var p = d3.select("body").selectAll('p');

var dataSet = [1,2,3];

var p.data(dataSet).enter().append("p").text(function(d){return d;});

/*body 选集的p元素数量小于dataSet数据集的数量，enter()模式会在body中append p 元素，使p元素的数量等于dataSet中的数据数量，并绑定数据集*/

</script>

exit() （绑定数据数量<对应元素数量）

当对应元素数量大于绑定数据数量时，通常需要删除元素，使元素数量与绑定数据的数量相等，后面通常跟上remove操作，然后更新元素上面绑定的数据

<body>

<p></p>

</body>

var p = d3.select("body").selectAll('p');

var dataSet = [1];

var p.data(dataSet).exit().remove().text(function(d){return d;});

/*body 选集的p元素的数量大于dataSet数据集的数量，exit()模式会删除body 中 p元素，使p元素的数量等于dataSet中数据数量，并绑定数据集*/

</script>

阅读全文

1 0

D3 进入-更新-退出 理解

D3 进入-更新-退出理解