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

Question

我正在尝试使用 d3.js 构建一个具有多个嵌套下拉列表的表。当我使用较新版本的 d3 时，我的代码工作得很好，但是由于各种原因，我需要使用 d3.js v3，当我用旧版本替换新版本时，我得到以下信息：

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 神奇地将输入选择包含在更新选择中，在幕后为您进行合并。从 d3v4 开始，您需要显式合并输入和更新。要编码合并更新并输入 d3v3，您基本上只需删除合并语句并在输入所有内容后使用更新选择即可。代替：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")&nbsp; .data([1,2,3])&nbsp; .enter()&nbsp; .append("p")&nbsp;&nbsp;original.append("span").text(d=>d);&nbsp;&nbsp;// update selection pre enter.var update = d3.selectAll("p")&nbsp; .data([1,2,3,4,5]) // two new elements.&nbsp;&nbsp;&nbsp; update.append("span")&nbsp; &nbsp; .text("&nbsp; in update selection pre enter");&nbsp; &nbsp;&nbsp;// enter selection.var enter = update.enter()&nbsp; .append("p")&nbsp;&nbsp;&nbsp; enter.append("span").text(d=>d + " in enter selection");&nbsp;&nbsp;// update post-enter.update.append("span").text(" | in update selection after enter");p {&nbsp; border: 1px dotted black;&nbsp; padding: 4px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>与var original = d3.selectAll("p")&nbsp; .data([1,2,3])&nbsp; .enter()&nbsp; .append("p")&nbsp;&nbsp;original.append("span").text(d=>d);&nbsp;&nbsp;// update selection pre enter.var update = d3.selectAll("p")&nbsp; .data([1,2,3,4,5]) // two new elements.&nbsp;&nbsp;&nbsp; update.append("span")&nbsp; &nbsp; .text("&nbsp; in update selection pre enter");&nbsp; &nbsp;&nbsp;// enter selection.var enter = update.enter()&nbsp; .append("p")&nbsp;&nbsp;&nbsp; enter.append("span").text(d=>d + " in enter selection");&nbsp;&nbsp;// update post-enter.update.append("span").text(" | in update selection after enter");// merge:update.merge(enter).append("span").text(" | in merged selection ");p {&nbsp; border: 1px dotted black;&nbsp; padding: 4px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>