試圖在d3中使用面向對象的方法生成條形圖

Question

plot我是d3的新手，也是JavaScript的新手（我的大部分經驗都是使用python）。我最近在本書交互式數據可視化中參考了一本教程：Scott Murray在網絡上創建了一個條形圖。我在完成本教程時沒有任何問題，但他在本書中採用的方法似乎主要是使用全局變量的過程。我想創建一個類似的圖表，但使用面向對象的方法能夠封裝變量並重新使用代碼，以便在一個腳本中生成多個圖表，而無需一遍又一遍地重複代碼。這是我到目前爲止已經試過沒有任何的運氣：

 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() 

我敢肯定有一些非常簡單的，我做錯了，沒有人知道這是爲什麼不工作，或者如果這是連採取正確的方法？任何幫助將非常感激。謝謝。

Answer 1

你的代碼的第一個問題是你在那裏有幾個錯別字，代替,和h而不是height。第二個問題是，您將所有內容都設置爲this的屬性，這在不同的上下文中會有所不同。例如，在

this.rect.attr("x", function(d, i) { 
       return this.xscale(i); 
      }) 

兩個this引用不同的對象 - 在第二種情況下this是你在工作，沒有你指的是該屬性的實際DOM元素。

因此，您需要將所有內容保存到全局對象的屬性中，如window。這當然比使用全局變量好不了多少。對於更多面向對象的方法，您需要創建一個包含所有信息的對象並傳遞它，或者實現可以調用的方法。

我把你的固定代碼放在jsfiddle here。