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

时间:2017-08-18 22:08:46

标签: d3.js

我有一个非常基本的问题。我有一个物种/丰度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); })
  };
});

1 个答案:

答案 0 :(得分:0)

您的数据阵列中没有任何名为selectValue的属性。 selectValue只是一个包含实际属性名称的变量。

因此,您应该使用括号表示法而不是点符号:

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

除此之外,还有两个额外的提示:

  1. 你不需要这个......

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

    ...获取所选值。只是做:

    var selectValue = this.value;
    
  2. 你不需要这个......

    d3.keys(data[0]))
    

    ...获取列标题。你可以这样做:

    data.columns