javascript - 数据加入d3；我一定没有正确理解选择和/或数据键功能

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 如何存储索引的内部工作原理，但您可以将 id 属性添加到您创建的 div 中，以便为您自己创建唯一索引。