javascript - オブジェクト指向アプローチを使用してd3で棒グラフを生成しようとしています

Question

プロット私は d3 が初めてで、javascript もかなり初めてです (私の経験のほとんどは Python を使用したものです)。私は最近、棒グラフの作成に関する Scott Murray著Interactive Data Visualization: for the webのチュートリアルを読みました。チュートリアルを完了するのに問題はありませんでしたが、本で彼が取っているアプローチは、グローバル変数を使用した手続き型のようです。同様のチャートを作成したいと考えていますが、オブジェクト指向のアプローチを使用して、変数をカプセル化し、コードを再利用して、コードを何度も繰り返すことなく、1 つのスクリプトで複数のチャートを生成できるようにします。これは私がこれまでに試したことです。

        function d3Chart(id, data, width, height, padding) {
            this.id = id
            this.data = data
            this.width = width
            this.height = height
            this.padding = padding
            this.svg =  d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("class", "chart")
                .attr("id". this.id);
            this.yscale = d3.scale.linear()
                .domain([0, d3.max(data)])
                .range([h - padding, padding])
            this.xscale = d3.scale.ordinal()
                .domain(d3.range(data.length))
                .rangeRoundBands([padding,w-padding], 0.05)
        };

        d3Chart.prototype.rect = function() {

            this.rect = this.svg.selectAll("rect")
                .data(this.data)
                .enter()
                .append("rect");
        }

        d3Chart.prototype.plot = function() {

             this.rect.attr("x", function(d, i) {
                    return this.xscale(i);
                })
                .attr("y", function (d) {
                    return this.yscale(d);
                })
                .attr("width", this.xscale.rangeBand())
                .attr("height", function(d) {
                    return this.height - this.padding - this.yscale(d);
                })
                .attr("fill", function(d) {
                    return "rgb(" + (100 - d) + ", 0, " + (d*10) + ")";
                });
            }

        var chart = new d3Chart("chart1", [5, 15, 10, 30, 20, 45, 15, 10, 5], 600, 400, 40);
        chart.rect()
        chart.plot()

私は間違っている非常に単純な何かがあると確信しています.なぜこれがうまくいかないのか、それともこれが正しいアプローチなのか知っていますか? どんな助けでも大歓迎です。ありがとう。