我有一个非常基本的问题。我有一个物种/丰度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); })
};
});
答案 0 :(得分:0)
您的数据阵列中没有任何名为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')
...获取所选值。只是做:
var selectValue = this.value;
你不需要这个......
d3.keys(data[0]))
...获取列标题。你可以这样做:
data.columns