D3.js D3：根据从下拉菜单中选择的属性设置条形图颜色

我有一个非常基本的问题。我有一个物种/丰度csv，绘制为条形图。数据集包括属性的标题，如属、位置等。我想根据从属性名称下拉菜单中选择的标题/属性，使用

d3.scaleOrdinal（）

为条形图上色。在加载csv之前，我不知道标题/属性

因此，如果用户选择“位置”，则颜色条将根据位置等进行着色。如果用户未进行选择，则颜色条应具有相同的颜色

如何从数据中选择属性以创建缩放域？这是最好的方式吗

d3.csv("data.csv", function(d) {
  d.abundance = +d.abundance;
  return d;
}, function(error, data) {
  if (error) throw error;

  //color domain
  var color = d3.scaleOrdinal().range(d3.schemeCategory10);

  //dropdown menu from csv header
  var select = d3.select('body')
    .append('select')
    .attr('class','select')
    .on('change',onchange)
    .selectAll('option')
      .data(d3.keys(data[0])).enter()
      .append('option')
      .text(function (d) { return d; });

  function onchange() {
    selectValue = d3.select('select').property('value')
    color.domain( data.map(function(d) { return d.selectValue; }) )
    g.selectAll(".bar")
        .attr("fill", function(d) { return color(d.selectValue); })
  };
});

---

数据数组中没有任何名为

selectValue

的属性

selectValue

只是一个保存实际属性名称的变量

因此，您应该使用括号表示法而不是点表示法：

color.domain(data.map(function(d) {
    return d[selectValue];
}))
g.selectAll(".bar")
    .attr("fill", function(d) {
        return color(d[selectValue]);
    })

除此之外，还有两条建议：

你不需要这个

selectValue = d3.select('select').property('value')

d3.keys(data[0]))

。。。以获取选定的值。只要做：

var selectValue = this.value;

你不需要这个

selectValue = d3.select('select').property('value')

d3.keys(data[0]))

。。。获取列标题。您只需执行以下操作：

data.columns

---

数据数组中没有任何名为

selectValue

的属性

selectValue

只是一个保存实际属性名称的变量

因此，您应该使用括号表示法而不是点表示法：

color.domain(data.map(function(d) {
    return d[selectValue];
}))
g.selectAll(".bar")
    .attr("fill", function(d) {
        return color(d[selectValue]);
    })

除此之外，还有两条建议：

你不需要这个

selectValue = d3.select('select').property('value')

d3.keys(data[0]))

。。。以获取选定的值。只要做：

var selectValue = this.value;

你不需要这个

selectValue = d3.select('select').property('value')

d3.keys(data[0]))

。。。获取列标题。您只需执行以下操作：

data.columns