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()接受三件事：

数组
功能
没有

话虽如此，这是造成混淆的原因：JavaScript中的字符串和数组都有length方法，可以使用方括号访问。用字符串：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

因此，data()不会破坏字符串...但是，它会将字符串视为数组：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

查看控制台：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: