d3中的数据联接;我一定没有正确理解选择和/或数据键功能

Data joins in d3; I must not be understanding selections and/or data key functions properly

本文关键字：数据 选择 正确理解 功能 d3      更新时间：2023-11-06

我正在研究一个简单的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"})

据我所知，您不会更新已经存在的元素。相反，您告诉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属性，为自己创建唯一的索引。

在上面的回答中，需要更新步骤来转换具有相同键的div。示例性的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);

到目前为止给出的其他答案使用了删除和重新创建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的颜色，使效果明显。

相关文章：