Fatal编程技术网
  • d3.js/
  • D3.js 保持D3数据的有序性

D3.js 保持D3数据的有序性

d3.js

D3.js 保持D3数据的有序性,d3.js,D3.js,据我所知，更新d3数据的正确方法是将其传递到选择的.data（） 我获得的数据不是有序的，也不是一致的。因此，我非常需要使用更新/添加/删除逻辑。所以在d3术语中，这是.data（）和.enter（）和.exit（）（对吗？） 所以我想做的是使用javascript字典而不是数组，其中键是我的唯一标识符。但我似乎不能那样做。一个假例子： data_one[0] = 'Dogs'; data_one[1] = 'Cats'; d3.selectAll('circle').data(data_on

据我所知，更新d3数据的正确方法是将其传递到选择的
.data（）

我获得的数据不是有序的，也不是一致的。因此，我非常需要使用更新/添加/删除逻辑。所以在d3术语中，这是
.data（）
和
.enter（）
和
.exit（）
（对吗？）

所以我想做的是使用javascript字典而不是数组，其中键是我的唯一标识符。但我似乎不能那样做。一个假例子：

data_one[0] = 'Dogs';
data_one[1] = 'Cats';

d3.selectAll('circle').data(data_one).enter().attr(...)
第二次运行时，我的数据可能相同，但顺序不同。我想用与以前相同的属性来表示它。我不想复制我的代码，但如果我只复制.data（data_two），那么错误的圆圈就会被新数据更新

这是键函数的目的，第二个参数是：它允许您通过控制哪个数据绑定到哪个元素来进行维护。例如，假设您有一个表示水果的对象数组：

var fruits = [
  {name: "orange", value: 200},
  {name: "apple", value: 124},
  {name: "banana", value: 32}
];

var div = d3.select("body").selectAll(".fruit")
    .data(fruits2, function(d) { return d.name; });

div.enter().append("div")
    .attr("class", "fruit")
    .text(function(d) { return d.name + ": " + d.value; });

div.exit().remove();
首次创建元素时，不需要键函数，因为没有任何现有元素，因此可以使用标准的selectAll data enter append模式：

var div = d3.select("body").selectAll(".fruit")
    .data(fruits)
  .enter().append("div")
    .attr("class", "fruit")
    .text(function(d) { return d.name + ": " + d.value; });
此操作的结果是：

<body>
  <div class="fruit">orange: 200</div>
  <div class="fruit">apple: 124</div>
  <div class="fruit">banana: 32</div>
</body>
苹果和香蕉在原始数据中，因此我们希望保留它们。这称为更新选择。草莓和柠檬是新的；这是输入选择。最后橙色消失了，形成了出口选择

使用引用数据的
名称
属性的键函数，我们可以按预期将新数据分配给旧元素。然后，我们可以创建进入的果实并移除退出的果实：

var fruits = [
  {name: "orange", value: 200},
  {name: "apple", value: 124},
  {name: "banana", value: 32}
];

var div = d3.select("body").selectAll(".fruit")
    .data(fruits2, function(d) { return d.name; });

div.enter().append("div")
    .attr("class", "fruit")
    .text(function(d) { return d.name + ": " + d.value; });

div.exit().remove();
这就是所谓的。（您可以第一次这样做；这是selectAll data enter追加模式的更一般形式。）结果是：

<body>
  <div class="fruit">apple: 124</div>
  <div class="fruit">banana: 32</div>
  <div class="fruit">lemon: 17</div>
  <div class="fruit">strawberry: 1465</div>
</body>
此外，在本例中，我们不需要对更新选择进行任何更改，因为apple和banana的值没有更改。如果更新数据也发生变化，您可以直接在上面的selection.data调用之外对selection.attr和selection.text进行链式调用。

THx以获取答案。我在两种完全相同的情况下使用selection.order（），一次有效，一次无效。选择的顺序是什么？它是否取决于数据函数的键？我猜答案是基于“”。然而，在我看来，这似乎不是真的。更新选择仍然只包含enter.append之后的更新。必须在
update
的
merge
和
enter
上调用
order
，以使其正常工作。为什么？没关系。我刚找到你的。正如我猜想的那样，v4中的情况发生了很大的变化，在SVG中，我们确实关心元素顺序，因为这是控制其z索引的唯一方法。