我目前正在使用 D3.js,遇到了一个我似乎无法解决的问题。
我有一个 CSV,它有一个名为“Set”的列和一个名为“Year”的列。我想从这些列中提取值并将它们用作类名。这就是我目前拥有的...
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) {
if (d["Set"] == 1)
{
return "set-1";
}
if (d["Set"] == 2)
{
return "set-2";
}
});
这工作得很好并且给每个数据点一个类名。但是,当我尝试以下操作时,“Set”类名称被“Year”类名称覆盖。
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", function(d) {
if (d["Set"] == 1)
{
return "set-1";
}
if (d["Set"] == 2)
{
return "set-2";
}
.attr("class", function(d) {
if (d["Year"] == 2012)
{
return "2012";
}
if (d["Year"] == 2013)
{
return "2013;
}
});
如何修改这段代码,使其添加额外的类名,而不是覆盖它们。
希望有人能帮忙。
最佳答案
还有一种有用的替代方法。您可以使用 selection.classed('class-name', true)
或 selection.classed('class-name', false)
为元素分配或删除类:
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append('circle')
.classed('2012', function(d) { return d['Year'] === 2012; })
.classed('2013', function(d) { return d['Year'] === 2013; })
.classed('set-1', function(d) { return d['Set'] === 1; })
.classed('set-2', function(d) { return d['Set'] === 2; });
我更喜欢这种方式,因为您可以使用相同的语法从元素中删除类。
关于javascript - D3.js 如何在使用函数时应用多个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16102505/