Question

我正在研究一个简单的d3示例，其中我使用d3在页面上放置一些新的div，添加属性以及添加数据驱动的样式。绊倒我的部分是当我想使用d3使用新数据更新某些样式时。我已经粘贴了下面jsFiddle（http://jsfiddle.net/MzPUg/15/）的代码。

在最初创建div的步骤中，我使用键函数将索引添加到元素和更新步骤（不工作的部分）我也使用键功能。但是d3文档中不清楚的是实际数据连接是如何工作的（例如，DOM元素中存储的索引在哪里？如果存在重复索引，会怎么样？等等）。

所以，我的知识存在明显的差距，但是在这里保持简单，任何人都可以解释为什么这个例子不起作用？关于d3中数据连接的精确性质的任何其他信息都将是结霜。（我已经看过http://bost.ocks.org/mike/join/。）

//add a container div to the body and add a class
var thediv = d3.select("body").append("div").attr("class","bluediv");

//add six medium-sized divs to the container div
//note that a key index function is provided to the data method here
//where do the resulting index value get stored?
var mediumdivs = thediv.selectAll("div")
    .data([10,50,90,130,170,210],function(d){return d})
    .enter().append("div")
    .style("top",function(d){return d + "px"})
    .style("left",function(d){return d + "px"})
    .attr("class","meddiv")

//UPDATE STEP - NOT WORKING
//Attempt to update the position of two divs
var newdata = [{newval:30,oldval:10},{newval:80,oldval:50}]        
var mediumUpdate = mediumdivs.data(newdata,function(d){return d.oldval})
    .style("left",function(d){return d.newval + "px"})

Answer 1

据我所知，您不会更新已存在的元素。相反，您告诉D3要绘制哪些元素，并确定要在屏幕上删除或更新的内容。

我使用工作代码更新了您的JSFiddle。我还添加了以下代码。

//add a container div to the body and add a class
var thediv = d3.select("body").append("div").attr("class", "bluediv");

function update(data) {
    var mediumdivs = thediv.selectAll("div").data(data, function(d) {
        return d;
    });

    // Tell D3 to add a div for each data point.
    mediumdivs.enter().append("div").style("top", function(d) {
        return d + "px";
    }).style("left", function(d) {
        return d + "px";
    }).attr("class", "meddiv")
    // Add an id element to allow you to find this div outside of D3.
    .attr("id", function(d) { 
        return d;
     });

    // Tell D3 to remove all divs that no longer point to existing data.
    mediumdivs.exit().remove();   
}

// Draw the scene for the initial data array at the top.           
update([10, 50, 90, 130, 170, 210]);      
// Draw the scene with the updated array.
update([30, 80, 90, 130, 170, 210]);

我不确定D3如何存储索引的内部工作方式，但您可以为您创建的div添加id属性，以便为自己创建唯一索引。

Answer 2

在上面的答案中，需要更新步骤来转换具有相同键的div。 illustrative jsfiddle显示有/没有更新功能会发生什么。

更新功能只是selection.stuff，而不是selection.enter（）。stuff：

//add a container div to the body and add a class
var updateDiv = d3.select("#updateDiv").attr("class", "bluediv");
var noUpdateDiv = d3.select("#noUpdateDiv").attr("class", "bluediv");

function update(selection,data,zeroTop,withUpdate) {
    //add six medium-sized divs to the container div
    //note that a key index function is provided to the data method here
    //where do the resulting index value get stored?
    var mediumdivs = selection.selectAll("div").data(data, function(d) {
        return d;
    });

    if(withUpdate){
        mediumdivs.style("top", function(d) {
            if(zeroTop){
                return 0
            }else{
                return d + "px";
            }        
        }).style("left", function(d) {
            return d + "px";
        }).attr("class", "meddiv");
    }


    mediumdivs.enter().append("div").style("top", function(d) {
        if(zeroTop){
            return 0
        }else{
            return d + "px";
        }        
    }).style("left", function(d) {
        return d + "px";
    }).attr("class", "meddiv");

    mediumdivs.exit().remove();   
}
//with the update function we maintain 3 of the old divs, and move them to the top
update(updateDiv,[10, 50, 90, 130, 170, 210],false,true);      
update(updateDiv,[10,50,90],true,true);

//without the update function divs are maintained, but not transitioned
update(noUpdateDiv,[10, 50, 90, 130, 170, 210],false,false);      
update(noUpdateDiv,[10,50,90],true,false);

Answer 3

到目前为止给出的其他答案使用了删除和重新创建div的策略。这不是必需的。 Al R.原始代码的问题就在于它使用data键的方式。对于旧数据和新传入的数据，使用相同的data键函数。因为在Al R.的示例中，旧数据是一个简单的数字数组，新数据是具有属性的对象数组，mediumUpdate行中未选择任何数据。

以下是选择工作的一种方法：

var newdata = [10, 50];
var newdatamap = {10:30, 50:80};
var mediumUpdate = mediumdivs.data(newdata, function(d){return d;})
    .style("left",function(d){return newdatamap[d] + "px";});

这是一个jsfiddle，它也会改变所选div的颜色，使效果明显。

数据加入d3;我不能正确理解选择和/或数据键功能

3 个答案: