如何访问所选元素？

Question

我使用 d3.js 并创建了一个 "option" window，它允许我在某些元素的索引 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; }); 的帮助下，"option" window 显示索引并允许我点击它。

我的目标：

例如 "option" window 显示索引的数量： 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) with several HTML option elements (Option object)。

然后在select元素上，onchange函数（这是一个standard event of the select element) then passes the select element to its function handler, so in that function this represents the actual select element, and therefore this.value (Select value property）对应于select元素的值（即value select 元素中当前选择的 option。

select元素的options属性，即this.options(Select options collection), gets you a list of all of the option elements within that select. Using the selectedIndex property of the select element, i.e. this.selectedIndex (Select selectedIndex property)，可以抓取当前选中的option列表中的元素为 this.options[this.selectedIndex].

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

的方式

如何访问所选元素？

How to get access to the selected element?

javascript

arrays

variables

options

d3.js