如何访问所选元素？ [英] How to get access to the selected element?

问题描述

我使用d3.js并且我创建了一个选项窗口，它允许我在一些元素的索引i之间进行选择，比如说一个长度为4个元素的数组。用户Andrew Reid在另一个帖子中帮助了这个代码，所以所有信用都给了他：

i use d3.js and i created a "option" window, that allows me to choose between the index i of some elements of let's say an array with the length of 4 elements. The user Andrew Reid helped with this code in another thread, so all credits to him:

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（函数） （d，i）{return i;}）; 选项窗口显示索引并允许我点击它。

With the help of the line .html(function(d,i) { return i; }); the "option" window shows up the indexes and allows me to click on it.

我的目标：

例如，选项窗口显示索引的数量：
0,1,2,3。
现在我点击索引2，我想在其他功能中使用该索引2。我的问题是，如何在变量 a 中保存点击的数字，并在拼接函数中使用此变量：

For example the "option" window shows up the numbers of the indexes: 0, 1, 2, 3. Now i click on the index "2" and i want to use that index "2" in other functions. My question is, how can i save that clicked number in an variable a and use this variable for example in a splice function:

data.splice(i, a) 

在代码中，当前拼接功能是 data.splice（i，1）。

In the code currently the splice function is data.splice(i,1).

感谢您的帮助。

推荐答案

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

You can pass the option text to your update function from your onchange function as:

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 元素（选择对象）有几个HTML 选项元素（选项对象）。

How this works: in your code you use d3 to append an HTML select element (Select object) with several HTML option elements (Option object) in it.

然后在选择元素， onchange 功能（这是一个标准活动 select 元素然后将 select 元素传递给它的函数处理程序，因此在该函数中此表示实际的 select 元素，因此 this.value （选择值属性）对应于<的值code>选择元素（即 select 元素中当前所选选项的值 ）。

Then on the select element, the onchange function (which is a 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) corresponds to the value of the select element (i.e. the value of the currently selected option in the select element).

选择元素的选项属性，即 this.options （选择选项集合），为您提供选择中所有选项元素的列表。使用选择元素的 selectedIndex 属性，即 this.selectedIndex （选择selectedIndex属性），您可以获取当前选中的选项列表中的元素 this.options [this.selectedIndex] 。

The options property of the select element, i.e. 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), you can grab the currently selected option element from the list as this.options[this.selectedIndex].

由于 this.options 集合是选项元素的列表（选项对象），要获取选项的实际文本，您可以使用 .text 就可以了。这就是你最终得到 this.options [this.selectedIndex] .text 。

Since the this.options collection is a list of Option elements (Option object), to get the actual text of that option you can use .text on it. And that's how you end up with this.options[this.selectedIndex].text.

这篇关于如何访问所选元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！