I am working on a D3 Scatter Plot having data from different regions - here regions are Continent names like Europe, Asia etc. I want to associate the region with a class name so that I can perform mon activities for one region.

Below is my code to add multiple classes together to an element:

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

When I write the following code to check what classes are associated with the current object.

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

I got this output:

So I can see that it is adding "dot" class successfully but not able to add Region dynamically.

TIA

I am working on a D3 Scatter Plot having data from different regions - here regions are Continent names like Europe, Asia etc. I want to associate the region with a class name so that I can perform mon activities for one region.

Below is my code to add multiple classes together to an element:

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

When I write the following code to check what classes are associated with the current object.

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

I got this output:

So I can see that it is adding "dot" class successfully but not able to add Region dynamically.

TIA

• javascript
• d3.js

2 Answers 2

You have move your function, passing it as the second argument of attr:

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

Once I encountered the same problem. I expected d3.js attr() to accept collection of values to represent multiple classes and ended up searching for the solution on this issue.

Multiple classes can be passed as a result of method call:

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

where label is the first class and item0 is the second one after this code is executed. You can add many more.

This is the result you get:

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

Maybe the design originates from data driven approach - you have selection of data and want to pass function of data or its result for an attribute's value. At the end, that made sense for me.