Javascript nvd3条形图中的集成滑块

我成功地更新了前几个条形图，通过普通javascript条形图上的滑块手动更改值

HTML

CSS

但是我希望能够制作一个由nvd3提供的更好看的图形 我所做的就是改变一个例子

HTML

非常感谢您的帮助，因为我对html和javascript编码还不熟悉，但我会尽力完成交给我的工作

---

（更新的nvd3 JSFIDLE图表）

如果我问一些愚蠢的问题，可能会重复“对不起”，顺便说一句，因为我以前确实没有与d3.js打过交道。因为在这些问题中，他们似乎在使用循环遍历他们自己公式的行。但是，如果我的代码中有硬编码的数据，我如何创建一个路径来使用滑块分别更新值？真的很抱歉用一些很简单的事情来打扰你，我真的不太了解循环

<div style="margin: 20px 0px 0px 60px">
    <form oninput="output1.value=slider1.value">
        <input type="range" name="slider1" id="slider1"/>
        <output name="output1" for="slider1"></output>
    </form>
    <form oninput="output2.value=slider2.value">
        <input type="range" name="slider2" id="slider2"/>
        <output name="output2" for="slider2"></output>
    </form>

<button id="updater">Update</button>
</div>

$(document).ready(function() {
                var chartColumn = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chart-column',
                        type: 'column',
                        backgroundColor: null
                    },
                    title: {
                        text: 'Percentage of rainfall'
                    },
                    xAxis: {
                        categories: [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ]
                    },
                    credits: {
                        enabled: false
                    },
                    yAxis: {
                        max: 100,
                        min: 0,
                        title: {
                            text: 'Rainfall (mm)'
                        }
                    },
                    legend: {
                        enabled: false,
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 100,
                        y: 70,
                        floating: true,
                        shadow: true
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+
                                this.x +': '+ this.y +' mm';
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                        series: [{
                        name: 'Air Consumption',
                        data: [42, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

                    }]
                });

                var $slider = $("#updater");

                    $slider.bind('click', function(e) {
                    e.preventDefault();
                        chartColumn.series[0].data[0].update(parseInt($("#slider1").val()));
                        chartColumn.series[0].data[1].update(parseInt($("#slider2").val()));
                });
            });

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
input[type="range"] {
    -webkit-appearance: none;
    background-color: rgb(144, 144, 144);
    height: 3px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 15px;
    border:solid black 1px;
    background:#ffffff;
    -webkit-border-radius: 4px;
}

<div id="chart">
    <svg></svg>
</div>
</div>
<form oninput="output1.value=slider1.value">
    <input type="range" name="slider1" id="slider1" />
    <output name="output1" for="slider1"></output>
</form>
<form oninput="output2.value=slider2.value">
    <input type="range" name="slider2" id="slider2" />
    <output name="output2" for="slider2"></output>
</form>
<button id="updater">Update</button>
</div>

    var data = [
    [{
        "key": "Previous","values": 
        [
            ['Resistance', 41.27, 0],
            ['fuel consumed', 47.96, 1],
            ['fuel cost', 44.65, 2]

        ]
    }, {
        "key": "Current","values": 
        [
            ['Resistance', 40.48, 0],
            ['fuel consumed', 45.82, 1],
            ['fuel cost', 40.16, 2]

        ]
    }]
];

var n = 0;

nv.addGraph(function () {
    var chart = nv.models.multiBarChart()
        .x(function (d) {
        return d[0];
    })
        .y(function (d) {
        return d[1];
    })
        .color(['#84c1ea', '#1f77b4'])
        .forceY([0, 100])
        .reduceXTicks(false)
        .stacked(false)
        .showControls(false)
        .margin({
        left: 50,
        right: 30
    });

    chart.xAxis.showMaxMin(true)
        .tickFormat['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];


    chart.yAxis.tickFormat['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
    d3.select("#chart svg")
        .datum(data[n])
        .transition().duration(500).call(chart);


                var $slider = $("#updater");

                    $slider.bind('click', function(e) {
                    e.preventDefault();
                        chartColumn.Previous[0].values[0].update(parseInt($("#slider1").val()));
                        chartColumn.Previous[0].values[1].update(parseInt($("#slider2").val()));
                });


});

Css

    #chart svg {
        height: 400px;
    }

However, I have no idea how to use the slider to manually update the values in the graph inside the nvd3 barchart. The update button not updating the values.