Question

所有

[更新]

最后弄清楚D3键功能在概念上是如何工作的：使用时   .data（newdata，key_function），这个函数会提取旧的bined   来自元素的数据并将其放入此键函数中获取一个键，然后执行   与newdata相同，并比较它们，如果相同，则替换   旧数据与新数据。 重要的事（对我而言）这里是：关键（   对于旧数据和新数据）总是由当前生成   key_function，所以一旦我们改变了键功能，如果我们仍然想要   将数据绑定到原始元素，我们需要找到一种方法来确保密钥   可以保持一致。

官方解释在这里（根据酷蓝）：https://github.com/mbostock/d3/wiki/Selections#data

我是D3数据绑定的新手，在阅读http://bost.ocks.org/mike/selection/之后，还有一个关于D3键功能如何工作的问题：

我想知道每轮数据更新是独立的还是与前一轮数据绑定指定的密钥有关？（存储的密钥如何：它是否作为属性存储在元素中？如果没有指定密钥功能，它将被删除吗？后）

像

第一轮数据绑定：

var letters = [
  {name: "A", frequency: .08167},
  {name: "B", frequency: .01492},
  {name: "C", frequency: .02780},
  {name: "D", frequency: .04253},
  {name: "E", frequency: .12702}
];

function name(d) {
  return d.name;
};

var color = d3.scale.category20();

var divs = d3.selectAll("div")
             .data(letters, name);
divs.enter()
    .append("div")
    .style("width", 50)
    .style("height", function(d, i){
        return d.frequency*500+"px";
    })
    .style("background-color", function(d, i){
        return color(i);
    });

然后对数据进行排序并再次绑定：

    letters.sort(function(a, b){
        return a.frequency - b.frequency;
    });

带键功能绑定的

[1]：

    divs.data(letters, name)
        .transition()
        .style("background-color", function(d, i){
            return color(i);
        })
        .style("height", function(d, i){
            return d.frequency*3000+"px";
        });

或 [2]没有关键功能绑定：

    divs.data(letters)
        .transition()
        .style("background-color", function(d, i){
            return color(i);
        })
        .style("height", function(d, i){
            return d.frequency*3000+"px";
        });

有没有人可以解释这两种不同的数据绑定发生了什么？我的主要困惑是如果我没有在数据更新中指定关键函数，是否会删除绑定到该元素的旧键，然后基于索引直到指定另一个键函数？

Answer 1

关键功能不会改变底层数据，它只是告诉D3如何提取标识属性 - 每个数据（在传递给.data()并绑定到DOM元素的数据中）将是传递给key函数后，返回值将用于匹配元素（即为DOM元素和datum返回相同值的元素）。

如果在更新时更改键功能，则计算的选择将相应更改。这就是它的全部内容。

如何在数据绑定中使用D3键功能

1 个答案: