Question

所有

我对D3数据绑定很新，我想了解的是D3如何控制数据更新，例如，我想构建一行按钮，结构是span包裹一个按钮：

<span><button>1</button></span>
<span><button>2</button></span>
<span><button>3</button></span>

代码就像：

var ds1 = [1,2,3,4]
var ds2 = [11,22,33,44]

var cells = d3.select("#content")
    .selectAll("span button.cell")
    .data(ds1)
cells.enter()
    .append("span")
    .append("button")
    .classed("cell", true)
    .text(function(d, i){
        return d;
    })

但是当我尝试更新ds2时，使用下面的更新功能，每个d都是先前的数据，如1,2,3,4。

function update(data){
    cells.data(data)
        .selectAll("button.cell")
        .text(function(d, i){
            return d;
        })
}

我想知道如何将新数据绑定到这些按钮？

Answer 1

重新绑定数据而不创建输入，更新和退出选择的最简单方法是将数据设置为包含按钮的选择：

function update(data) {
    var update = d3.selectAll(".cell")
        .data(data)
        .text(function(d) {
            return d;
        })
}

以下是演示：

＆＃13;

var ds1 = [1, 2, 3, 4]
var ds2 = [11, 22, 33, 44]

var cells = d3.select("#content")
    .selectAll("span button.cell")
    .data(ds1, function(d, i) {
        return i
    });

cells.enter()
    .append("span")
    .append("button")
    .classed("cell", true)
    .text(function(d) {
        return d;
    });

function update(data) {

    var update = d3.selectAll(".cell")
        .data(data)
        .text(function(d) {
            return d;
        })
}

d3.select("#btn").on("click", function() {
    update(ds2);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content"></div>
<br>
<button id="btn">Update</button>

＆＃13;

或者，要像在问题中一样使用cells更新数据，只需选择更新选择中的按钮：

function update(data) {
    cells.data(data)
    var update = cells.select(".cell")
        .text(function(d) {
            return d;
        })
}

以下是相应的演示：

＆＃13;

var ds1 = [1,2,3,4]
var ds2 = [11,22,33,44]

var cells = d3.select("#content")
    .selectAll("span button.cell")
    .data(ds1, function(d,i){ return i});
		
cells.enter()
    .append("span")
    .append("button")
    .classed("cell", true)
    .text(function(d){
        return d;
    });
	
function update(data){

cells.data(data)

    var update = cells.select(".cell")
		.text(function(d){
            return d;
        })
}

d3.select("#btn").on("click", function(){
    update(ds2);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="content"></div>
<br>
<button id="btn">Update</button>

＆＃13;

如何在D3中自动更新子元素数据绑定

1 个答案: