Question

128

D3.js How to apply multiple classes when using a function

rated 0 times [ 133] [ 5] / answers: 1 / hits: 28290 / 11 Years ago, fri, april 19, 2013, 12:00:00

I'm currently using D3.js and have come across a problem that I just can't seem to solve.

I have a CSV that has a column named Set and a column named Year. I want to pull the values from these columns and use them as class names. This is what I currently have...

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;

                }

            });

This works perfectly fine and gives each data-point a class name. When I try the following however, the Set class names are over written by the Year class names.

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;

                }

            });

How can this code be rectified so that it adds on additional class names as opposed to over-writing them.

Hope someone can help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arlethjeanettep

Add To Favorites

Follow

Total Points: 506

Total Questions: 96

Total Answers: 79

Location: Liberia

Member since Tue, Mar 14, 2023

1 Year ago

arlethjeanettep questions

1 How to mock a constructor instantiated class instance using jest?

Tue, May 17, 22, 00:00, 2 Years ago

1 How to bypass human verification 'press and hold' using Selenium in Python?

Sun, Aug 1, 21, 00:00, 3 Years ago

1 How to make drag to scroll work smoothly with scroll snapping

Sun, Jun 13, 21, 00:00, 3 Years ago

1 Rate limit the number of request made from react client to API

Fri, Jan 22, 21, 00:00, 3 Years ago

1 How to test if React component is returning null or its children using React Testing Library?

Wed, Jul 15, 20, 00:00, 4 Years ago

View All

answered 11 Years ago gregorio · Accepted Answer

You just want a single function that does both things don't you. Something along these lines perhaps...

var circle = svg.selectAll(circle)

        .data(data)

        .enter()

        .append(circle)

        .attr(class, function(d) {

            var c = ;

            if (d[Set] == 1)

            {

                c = set-1;

            }

            if (d[Set] == 2)

            {

                c = set-2;

            }

            if (d[Year] == 2012)

            {

                c +=  2012;

            }

            if (d[Year] == 2013)

            {

                c +=  2013;

            }

            return c;

        });