Как добавить класс к каждой строке линейной диаграммы

Я нарисовал линейную диаграмму, я хочу дать каждой строке динамический класс.

 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: {
            values: formatedData,
            key: key,
            color: color,
            class: '_class'
        }

я передал класс в данных, но он не выбирает это.. . я хочу класс для каждой строки

ОТРЕДАКТИРОВАНО: вот как я добавляю класс в строку. в nv.d3.js я обновил эту функцию до:

  // 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];
                                })
                            }
                        })
                    );

и обработать его здесь:

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

person Community    schedule 15.07.2015    source источник
comment
Я не вижу никаких попыток установить атрибут класса в вашем коде... что вы пробовали?   -  person Cool Blue    schedule 15.07.2015
comment
теперь я обновил nv.d3.js и добавил класс в строку.   -  person    schedule 15.07.2015
comment
В самом деле? куда? А chartsData — это массив объектов вида data, верно?   -  person Cool Blue    schedule 15.07.2015
comment
Я обновил вопрос.   -  person    schedule 15.07.2015


Ответы (1)


Вы не можете добавить определенный атрибут в группу данных следующим образом:

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

Измените свой код следующим образом, и он будет работать правильно:

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);
});

Другой тип кода:

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;
    });
});
person Gabriel    schedule 15.07.2015
comment
Я думаю, что в этом ответе есть некоторые ошибки: 1) Ваше первое предложение неверно. Почему нельзя использовать код из первого фрагмента? Это стандартный способ D3 для установки значений атрибутов для выбора, и, по сути, это должен быть способ решить проблему OP. 2) Ваш второй фрагмент содержит очень серьезную ошибку в строке 3 при попытке напрямую назначить строку выбору. 3) На самом деле это не ошибка, но третий фрагмент — просто громоздкий способ функционально сделать то же самое, что и в первом фрагменте. - person altocumulus; 24.01.2016
comment
@altocumulus это была просто синтаксическая ошибка. Это не большая ошибка, просто измените «calss» на «class». - person Gabriel; 24.01.2016
comment
Нет, второй фрагмент сейчас не имеет никакого смысла. Чтобы установить значение атрибута, вам нужно передать второй аргумент .attr(), который в конечном итоге будет идентичен фрагменту 3. - person altocumulus; 24.01.2016
comment
@altocumulus да, я понял, это был простой способ, исправленный в новой версии d3, теперь он работает правильно. - person Gabriel; 24.01.2016