Question

我使用d3.js并且我创建了一个＆＃34;选项＆＃34;窗口，允许我在let的一些元素的索引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; });行的帮助下，＆＃34;选项＆＃34;窗口显示索引并允许我点击它。

我的目标：

例如＆＃34;选项＆＃34;窗口显示索引的数量： 0,1,2,3。现在我点击索引＆＃34; 2＆＃34;我想用那个索引＆＃34; 2＆＃34;在其他功能。我的问题是，如何在变量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）。< / p>

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

select元素的options属性，即select（Select options collection），可以获取该this.options元素中的所有option元素的列表{1}}。使用select元素的selectedIndex属性，即select（Select selectedIndex property），您可以从列表中抓取当前选定的this.selectedIndex元素{{1 }}

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

如何访问所选元素？

1 个答案: