How to add class to each line in linechart

Question

i have draw a line chart i want to give each line a dynamic class.

 nv.addGraph(function() {
        height = 450;
        width = $(div).width() - 50;
        chart = nv.models.lineWithFocusChart()
            .width(width)
            .height(height);
        var svg = d3.select(div).append("svg")
            .datum(chartsData)
            .call(chart)
            .style({
                'width': width,
                'height': height
            })

Data:

 data: {
            values: formatedData,
            key: key,
            color: color,
            class: '_class'
        }

i have passed the class in the data but it doesn't pick this.. . i want a class for each line

EDITED: this is how i add the class in the line. in the nv.d3.js i have update this function to :

  // Update Main (Focus)
                var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
                    .datum(
                        data
                        .filter(function(d) {
                            return !d.disabled
                        })
                        .map(function(d, i) {
                            return {
                                key: d.key,
                                class: d.class,
                                circleClass: d.circleClass,
                                values: d.values.filter(function(d, i) {
                                    return lines.x()(d, i) >= extent[0] && lines.x()(d, i) <= extent[1];
                                })
                            }
                        })
                    );

and process it here :

var groups = wrap.select('.nv-groups').selectAll('.nv-group')
groups
    .attr('class', function(d, i) {
                        return d.class + ' nv-group nv-series-' + i
                    })

I can't see any attempt to set the class attribute in your code... what did you try? — Cool Blue, Jul 15 '15 at 09:03
really? where? And `chartsData` is an array of objects with the form `data` right? — Cool Blue, Jul 15 '15 at 09:11

Gabriel · Accepted Answer · 2016-01-24T12:01:26.170

-1

You could not add specific attribute to group of data like this :

var groups = wrap.select('.nv-groups').selectAll('.nv-group');
groups.attr('class', function(d, i) {
    return d.class + ' nv-group nv-series-' + i
});

Change your code like this and it will work correctly:

var groups = wrap.select('.nv-groups').selectAll('.nv-group');
groups.each( function(d, i) {
    d3.select(this).attr('class', d.class + ' nv-group nv-series-' + i);
});

Other type of code is:

var groups = wrap.select('.nv-groups').selectAll('.nv-group');
groups.each( function(d, i) {
    d3.select(this).attr('class',function(){ 
        return  d.class + ' nv-group nv-series-' + i;
    });
});

edited Jan 24 '16 at 12:01

answered Jul 15 '15 at 11:18

Gabriel

1,413
1
18
29

I think, there are some errors in this anser: 1) Your first sentence is not correct. Why shouldn't it be possible to use the code from the first snippet? This is D3's standard way of setting attribute values on a selection, and, in fact, it should be the way to go to solve OP's problem. 2) Your second snippet contains a very bad error on line 3 when trying to directly assign the string to the selection. 3) This is not really an error, but the third snippet is just a cumbersome way of doing functionally the same as in the first snippet. – altocumulus Jan 23 '16 at 23:47
@altocumulus it was just a syntax error, It's not a huge mistake just change 'calss' to 'class'. – Gabriel Jan 24 '16 at 08:06
No, the way second snippet is **now** it doesn't make any sense. To set the attribute's value you need to pass a second argument to `.attr()` which will then end up being identical to snippet 3. – altocumulus Jan 24 '16 at 08:20
@altocumulus yes I got it, it was a simple way that fixed in new version of d3, now it work correctly. – Gabriel Jan 24 '16 at 12:02

How to add class to each line in linechart

1 Answers1