将多个类名添加到元素D3

Question

我正在制作一个D3 Scatter Plot，其中包含来自不同地区的数据 - 这里的区域是欧洲，亚洲等大陆名称。我想将该地区与类名相关联，以便我可以为一个地区执行常见活动。

下面是我将多个类一起添加到元素的代码：

var dot = svg.append("g")
                .attr("class", "dots")
                .selectAll(".dot")
                .data(interpolateData(1900))
                .enter().append("circle")
                .attr("class", "dot " + function(d) { return d.Region; });

当我编写以下代码以检查与当前对象关联的类时。

alert(this.getAttribute('class'));

我得到了这个输出：

所以我可以看到它正在添加＆＃34; dot＆＃34;类成功但无法动态添加Region。

TIA

Answer 1

您已移动函数，将其作为attr的第二个参数传递：

.attr("class", function(d){
    return "dot " +  d.Region; 
});

Answer 2

我曾经遇到过同样的问题。我希望 d3.js attr() 接受值的集合来表示多个类，并最终寻找有关此问题的解决方案。

方法调用的结果可以传递多个类：

.attr('class', (d) => `label item${d.itemNr}`);

其中 label 是第一类，item0 是执行此代码后的第二类。您可以添加更多。

这是你得到的结果：

<text class="label item0" x="543" y="51">Item 0</text>

也许设计源于数据驱动的方法 - 您可以选择数据并希望将数据的函数或其结果传递给属性值。最后，这对我来说很有意义。