D3.js-未捕获类型错误:.enter(..).append(..).merge不是函数

Question

我正试图使用d3.js构建一个包含多个嵌套下拉列表的表。当我使用较新版本的d3时，我的代码运行良好，但由于各种原因，我需要使用d3.jsv3，当我用较旧版本替换较新版本时，我会得到以下结果：

Uncaught TypeError: options4.enter(...).append(...).merge is not a function

我假设d3的旧版本没有merge((函数，但我不知道用什么来代替它。

这是我的代码：

<script src="https://d3js.org/d3.v3.min.js"></script>
var colorScheme = d3.scale.ordinal()
.domain(["USA", "PRI", "CAN"])
.range(["#d52922", "#d69105", "#4b7ba1"]);
var jobsCsvData = null;
d3.csv("master_info_final_v12_conversion.csv", function(data) {
data.forEach(function(d) {
d["index"] = d["index"];
d["name"] = d["name"];
d["city"] = d["city"];
d["state"] = d["state"];
d["country"] = d["country"];
});
JobsCsvData = data;
var nestedTwo = d3.nest()
.key(function(d) {
return d.country;
})
.key(function(d) {
return d.state;
})
.key(function(d) {
return d.city;
})
.entries(data);
function updateLocationValues(g) {
var filtered = filtered2[0].values.filter(function(d) {
return d.key == g;
});
var options5 = d3.select("#select5")
.selectAll("option")
.data(filtered[0].values.map(function(d) {
//.data(filtered3[0].values.map(function(d) {
return d.key;
}));
options5.exit().remove();

下面是merge((函数，它给出了我的问题。

options5.enter()
.append("option")
.merge(options5)
.text(function(d) {
return d;
});
tabulate(data);
}
var options5 = d3.select("#select5")
.selectAll("option")
.data(filtered3[0].values.map(function(d) {
return d.key;
}.)).enter()
.append("option")
.text(function(d) {
return d;
});
.... {more code}

}

如果这还不够的话，我可以包含更多的代码。任何帮助都将不胜感激。

Answer 1

D3v3神奇地将enter选择包含在更新选择中，在幕后为您进行合并。从d3v4开始，您需要显式地合并enter和update。

要编码合并更新并输入d3v3，基本上只需删除merge语句，并在输入所有内容后使用更新选项。代替：

var update = d3.selectAll("...").data(...);
enter = update.enter().append()....
update.merge(enter).attr(....

你可以简单地使用：

var update = d3.selectAll("...").data(...)
update.enter().append()....
update.attr(... // includes both enter and update.

从本质上讲，d3v4中的变化是选择是不可变的，输入选择在执行输入后不再神奇地添加到后台的更新选择中。然而，为了允许组合输入和更新选择，d3引入了selection.merge()方法，该方法通过组合两者来返回新的选择。

以下是几个片段，显示了每一步的每个选择中的d3v3(第一个(与d3v4+(第二个(：

var original = d3.selectAll("p")
.data([1,2,3])
.enter()
.append("p")

original.append("span").text(d=>d);

// update selection pre enter.
var update = d3.selectAll("p")
.data([1,2,3,4,5]) // two new elements.

update.append("span")
.text("  in update selection pre enter");

// enter selection.
var enter = update.enter()
.append("p")

enter.append("span").text(d=>d + " in enter selection");

// update post-enter.
update.append("span").text(" | in update selection after enter");

p {
border: 1px dotted black;
padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

与。

var original = d3.selectAll("p")
.data([1,2,3])
.enter()
.append("p")

original.append("span").text(d=>d);

// update selection pre enter.
var update = d3.selectAll("p")
.data([1,2,3,4,5]) // two new elements.

update.append("span")
.text("  in update selection pre enter");

// enter selection.
var enter = update.enter()
.append("p")

enter.append("span").text(d=>d + " in enter selection");

// update post-enter.
update.append("span").text(" | in update selection after enter");
// merge:
update.merge(enter).append("span").text(" | in merged selection ");

p {
border: 1px dotted black;
padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>