D3.jsヒストグラムレイアウトを使用して矩形を描画しようとしています

Question

私はJavascriptを初めて使ったので、d3.jsを使ってヒストグラムを作成しようとしています。私はチュートリアルとd3で以前に作成されたヒストグラムの例を辿ってきましたが、私の矩形を表示する方法を理解することはできません。

私のヒストグラムは、現在、私のデータセットの各データポイントの色属性を表す各ビンに1,2,3,4の数字を持つ4個のビンを含んでいます。 .attr "x"関数でconsole.log（d）を実行すると、4つの異なるインデックスを持つ一種の配列として表示され、それぞれ特定の色を持つデータセットのデータポイントの総数が表示されます。今、私はその配列を矩形にしようとしていますが、幅と高さの関数は正しくありません。誰かがd.dxとd.yがどういうことをしているのか説明することができれば、間違っていると助けになるでしょう。私は私のスクリプトのsrc値

d3.csv("data.csv", function(data) { 

    var map = data.map(function (i) { return parseInt(i.color); }) 
    var histogram = d3.layout.histogram() 
    .bins(4)(map) 
    var canvas = d3.select("body").append("svg") 
    .attr("width", 500) 
    .attr("height", 500); 

    var bars = canvas.selectAll(".bar") 
    .data(histogram) 
    .enter() 
    .append("g") 

    bars.append("rect") 

     .attr("x", function (d) 
     { 
      //console.log(d) 
      return d.x * 5; }) 
     .attr("y", 0) 
     .attr("width",function(d) { return d.dx; }) 
     .attr("height", function(d) { d.y; }) 
     .attr("fill", "steelblue"); 


}); 

Answer 1

私はupdated your plunk次のようにようd3.v3.min.js使用しています。

bars.append("rect") 
     .attr("x", function(d) { return d.x*100; })   
     .attr("y", 50) 
     .attr("height", function(d) { return d.y * 10;}) 
     .attr("width", function(d) { return d.dx*50;}) 

     .attr("fill", "steelblue") 

     .on("mouseout", function() 
      { 

       d3.select(this) 
       .attr("fill", "steelblue"); 
     }) 
     .on("mouseover", function() 
      { 

       d3.select(this) 
       .attr("fill", "orange"); 
     }); 

コードが正常に動作しているように見えます。要素が重複しているだけです（また、v3の代わりにd3 v4が参照されました）。私がやったことです：

• DXの対応：乗算
  • d.x 50によって空間に要素が
  • は、あなたの元の質問については、重複

  を減らすために50でd.dxを掛けあなたのケースでは、ビンの範囲に0.75（4つの範囲は1から4の範囲になります）0.75：1+（0.75 * 4）= 4） * dyはビンの「高さ」に対応し、要素の数である。