使用D3将“value”属性动态添加到选项标记

Question

我想使用与设置文本值相同的文本动态填充我的选项标签'value属性。以下是我目前的代码。

HTML：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="x_axis">x axis: </div>

JavaScript的：

d3.csv('data/3457/CLVF_l3e.csv', function(error, data){
  var headers = d3.keys(data[0]);

  var xAxis = d3.select("#x_axis")
    .append("select")
    .selectAll("option")
      .data(headers)
    .enter().append("option")
      .text(String);
});

Answer 1

你要求的是没有必要的。如果您生成HTML：

<select>
  <option>A</option>
  <option>B</option>
</select>

直接或通过D3 - 在选项元素上没有value="…"属性 - 然后是将与表单一起提交的每个选项的值（并且可以通过option元素的.value属性访问，并且设置为select元素的.value属性）是选项的文本。使用getAttribute()将（正确）不显示此值，但访问该属性将为。

演示：http://jsfiddle.net/dMr6A/2/

但是，通常在D3.js中将属性设置为值，您将使用selection.attr method：

.enter().append("option")
  .text(String)
  .attr('value',String);

演示：http://jsfiddle.net/dMr6A/1/