如何将 class 添加到折线图中的每一行

Question

我画了一个折线图我想给每条线一个动态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: {
            values: formatedData,
            key: key,
            color: color,
            class: '_class'
        }

我已经通过了数据中的 class 但它没有选择这个...。我想要每行 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
                    })

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

如何将 class 添加到折线图中的每一行

How to add class to each line in linechart

d3.js

nvd3.js

linechart