获取d3选择中每个元素的值属性答案

【问题标题】：Get value property of each element in d3 selection获取d3选择中每个元素的值属性
【发布时间】：2017-04-22 00:56:09
【问题描述】：

我有很多用于以下表单的输入标签：

<input class="checkbox" type="checkbox" value="something_I_need_when_checked">

我需要所有选中框的值。当我调用console.log(d3.selectAll("input.checkbox:checked").property("value")) 时，我只看到第一个元素的值。 This 帖子有一些关于如何更改这些值的线索（编辑：我不想改变任何东西；我只想要这些值）。我尝试使用建议的selection.each(function()) 想法，但我没有得到任何帮助。如何获取我选择的所有值。

我是 n00b，请客气。谢谢~

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

selection.each 确实有效。但是，您必须在单击复选框后调用它。

在此演示中，选择将在您单击名为“检查”的按钮之后创建。单击所需的框，然后单击按钮：

d3.select("button").on("click", function() {
  var boxes = d3.selectAll("input.checkbox:checked");
  boxes.each(function() {
    console.log(this.value)
  })
});

<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>

编辑：将检查的值存储在数组中：

var checked = [];
d3.select("button").on("click", function() {
  var boxes = d3.selectAll("input.checkbox:checked");
  boxes.each(function() {
    checked.push(this.value)
  });
  console.log(checked)
});

<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>

【讨论】：

谢谢，我有复选框检查。我试图使用类似selection.each(function(d) { return d.property("value")}) 的东西；它抛出了错误。很高兴知道我不需要使用 .property()`
d 将不起作用，因为没有数据绑定到这些元素。
最后一个问题：如何将它们存储在数组中？或者我可以通过其他方式访问它们吗？

【解决方案2】：

将字段放入数组的另一种方法是使用map 函数。在下面的示例中，我以 Gerardo Furtado 的回答为基础。

d3.select("button").on("click", function() {
  var checkedBoxes = d3.selectAll("input.checkbox:checked").nodes().map(box => box.value);
  console.log(checkedBoxes)
});

<script src="https://d3js.org/d3.v5.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>

【讨论】：