javascript - D3 将数据字符串拆分为字符

Question

我有一个 D3 选择器引用，用于填充选择器下拉列表。有时，我想用从另一个选择器获取的单个值填充选择器。

我可以通过控制台和调试器得知 var b = "201701" 的值，并且类型是字符串。

问题是，当我尝试使用值 b 填充此节点时，D3 将字符串拆分为字符，并且我得到一个选择器，其中有 6 个选项对应于 "2","0","1", “7”，“0”，“1”。

有人知道如何防止D3分割字符串吗？

    var b = beginningSelector.node().value;
    console.log(typeof b);
    console.log(b);
    endingSelector.selectAll("option")
      .data(b)
      .enter()
      .append("option")
      .attr("value", function (d) { return d; })
      .text(function (d) { return d; });
  });

Answer 1

这是 data() 方法的预期行为。在 D3 中，data() 接受三件事:

1. 数组
2. 一个函数
3. 没什么

话虽如此，这就是造成困惑的原因:JavaScript 中的字符串和数组都有 length 方法，并且可以使用方括号访问。用字符串:

var string = "helloworld";
for (i = 0; i < string.length; i++) {
  console.log(string[i])
}

现在带有数组的完全相同的代码:

var arr = ["hello", "wolrd"];
for (i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

你看到了吗？它不会破坏，不会引发错误...但它会给出不同的结果。

因此，data() 不会因字符串而中断...但是，它会将字符串视为数组:

var foo = d3.select("body").selectAll("foo").data("helloworld").enter();
console.log(foo.data())

<script src="https://d3js.org/d3.v4.min.js"></script>

解决方案:如果要将字符串视为单个数据，请使用方括号:

endingSelector.selectAll("option")
    .data([b])

查看控制台:

var foo = d3.select("body").selectAll("foo").data(["helloworld"]).enter();
console.log(foo.data())

<script src="https://d3js.org/d3.v4.min.js"></script>