d3.js - nvd3 lineplusbar 在一张图中绘制不同的数据

Question

我有以下图表：

图表包含强生公司的股息。我需要添加未来 10 年的股息预测 = 添加新颜色以区分它们。所以我在谷歌上搜索并找到了改变颜色的功能：

d3.selectAll("rect.nv-bar").style("fill", function(d){
                if (d.x < {{ current_year_timestamp|date:"U000" }}) {
                    return "#1f77b4";
                } else if (d.x == {{ current_year_timestamp|date:"U000" }}) {
                    return "#2ca02c";
                } else {
                    return "#7f7f7f";
                }
            });

但它缺少两件事。首先是没有关于绿色和灰色条的图例。第二件事是，如果我通过单击图例中的股息（左轴）来重置图表，所有条形都是蓝色的（不再使用函数）。知道如何解决这个问题吗？我正在考虑为未来（10 年）的股息添加数据，以某种方式与股息历史分开，并且 nvd3 会将其识别为不同的数据，并且它会在图例中拥有自己的“重置”按钮。可以通过很少的 nvd3 代码更改来完成吗？这是我的完整 js：

<script type="text/javascript">
        nv.addGraph(function() {
            var testdata = exampleData(),
                    chart = nv.models.linePlusBarChart()
                            .margin({top: 30, right: 70, bottom: 50, left: 70})
                            .x(function(d, i) { return i })
                            .color(d3.scale.category10().range())
                            .tooltipContent(function(key, x, y, e, graph) {
                                if (x < new Date().getFullYear()) {
                                    return '<h3>Dividend history</h3><p>' +  y + ' for ' + x + '</p>'
                                } else if (x == new Date().getFullYear()) {
                                    return '<h3>This year\'s dividends</h3><p>' +  y + ' for ' + x + '</p>'
                                } else {
                                    return '<h3>Future dgr10 dividends</h3><p>' +  y + ' for ' + x + '</p>'
                                }
                            })
            chart.xAxis.tickFormat(function(d) {
                var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
                return d3.time.format('%Y')(new Date(dx))
            });

            chart.y1Axis
                    .tickFormat(d3.format(',05f'));

            chart.y2Axis
                    .tickFormat(function(d) { return '$' + d3.format(',05f')(d) });

            chart.bars.forceY([0]);

            chart.lines.forceY([0]);

            d3.select('#chart svg')
                    .datum(exampleData())
                    .transition().duration(500).call(chart);
            first_timestamp = new Date(new Date().getFullYear(), 1, 1, 6, 0, 0, 0);
            d3.selectAll("rect.nv-bar").style("fill", function(d){
                if (d.x < {{ current_year_timestamp|date:"U000" }}) {
                    return "#1f77b4";
                } else if (d.x == {{ current_year_timestamp|date:"U000" }}) {
                    return "#2ca02c";
                } else {
                    return "#7f7f7f";
                }
            });
            nv.utils.windowResize(chart.update);

            return chart;
        });
    </script>
    <script type="text/javascript">
        function exampleData() {
            return [
                {
                    "key" : "Dividends" ,
                    "bar": true,
                    "values" : [
                        {% for dividend in dividend_list %}
                            [ {{ dividend.date|date:"U000" }} , {{ dividend.amount|floatformat:"-3" }} ] {% if not forloop.last  %}, {% endif %}
                        {% empty %}
                            []
                        {% endfor %}
                    ]
                } ,

                {
                    "key" : "Dividends together" ,
                    "values" : [
                        {% with totalDividend=0.0 %}
                            {% for dividend in dividend_list %}
                                [ {{ dividend.date|date:"U000" }} , {% set_by 'totalDividend' totalDividend|add_float:dividend.amount as totalDividend %}{{ totalDividend|floatformat:"-3" }} ]
                                {% if not forloop.last  %}, {% endif %}
                            {% empty %}
                                []
                            {% endfor %}
                        {% endwith %}
                    ]
                }
            ].map(function(series) {
                        series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
                        return series;
                    });
        }
    </script>