如何访问选定的元素？

Question

我使用 d3.js 并创建了一个“选项”窗口，它允许我在一些元素的索引 i 之间进行选择，比如一个长度为 4 个元素的数组。用户 Andrew Reid 在另一个线程中帮助编写了此代码，因此所有功劳归于他：

var data = [10,20,30,40];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value) });

var start = select.append('option')
  .html("select: ");

var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d,i) { return i; });



//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);

var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d,i) { return i * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d,i) { return color[i]; });


// Update everything:
function update(i) {
  data.splice(i,1); // remove that element.

  // Update and remove option from the select menu:
  options.data(data).exit().remove();

  // Remove that circle:
  circles.data(data).exit().remove(); 

  circles.attr('cx',function(d,i) { return i * 30 + 50; })
    .attr('fill',function(d,i) { return color[i]; });

  // reset the select menu:
  start.property('selected','selected');
}

在.html(function(d,i) { return i; }); 行的帮助下，“选项”窗口会显示索引并允许我单击它。

我的目标：

例如，“选项”窗口会显示索引的编号： 0、1、2、3。 现在我点击索引“2”，我想在其他功能中使用该索引“2”。我的问题是，我怎样才能将点击的数字保存在变量a 中，并在拼接函数中使用这个变量：

data.splice(i, a) 

当前代码中拼接函数为data.splice(i,1)。

感谢您的帮助。

Answer 1

您可以将选项文本从 onchange 函数传递给更新函数：

this.options[this.selectedIndex].text

所以你最终会得到：

var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value, this.options[this.selectedIndex].text) }); // note: since you are setting value equal to the index, you can also use this.value instead of this.selectedIndex

function update(i, a) {
  data.splice(i,a);
  ...
}

这是如何工作的：在您的代码中，您使用 d3 附加一个 HTML select 元素 (Select object)，其中包含多个 HTML option 元素 (Option object)。

然后在select 元素上，onchange 函数（这是select 元素的standard event）然后将select 元素传递给它的函数处理程序，因此在该函数中this 表示实际的select 元素，因此this.value (Select value property) 对应于select 元素的值（即select 元素中当前选定的option 的value）。

select 元素的options 属性，即this.options (Select options collection)，为您获取该select 中所有option 元素的列表。使用select 元素的selectedIndex 属性，即this.selectedIndex (Select selectedIndex property)，您可以从列表中获取当前选中的option 元素为this.options[this.selectedIndex]。

由于this.options 集合是选项元素 (Option object) 的列表，要获取该option 的实际文本，您可以在其上使用.text。这就是你最终得到this.options[this.selectedIndex].text的方式。