私はJavascriptを初めて使ったので、d3.jsを使ってヒストグラムを作成しようとしています。私はチュートリアルとd3で以前に作成されたヒストグラムの例を辿ってきましたが、私の矩形を表示する方法を理解することはできません。D3.jsヒストグラムレイアウトを使用して矩形を描画しようとしています
私のヒストグラムは、現在、私のデータセットの各データポイントの色属性を表す各ビンに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");
});
plnkrなどのデータを使用してサンプルを設定できますか?あなたのコードがうまくいくように、今問題を理解するのは難しいです。ヒストグラム[here](https://github.com/d3/d3-3.x-api-reference/blob/master/Histogram-Layout.md)については、compelet doucmentationを参照できます。 –
@HuguesStefanski私はplnkrの使い方を正確にはわかりませんが、このコードを作成しても何も表示されないようです。 plnkrにはコンソールがないので、console.log(d)がコンソールに出力しているものを見ることができません。 chromeのコンソールを使用すると、これはconsole.log(d)の出力となります。https://i.gyazo.com/2db48d1f119a11c3af35137f980a4f5e.png https://i.gyazo.com/730f922dcd5fe7871bb75d1b4a5d3e71.pngこれらの配列値にはそれぞれ独自の値がありますx、dx、長さ、およびyの値と私はそれらの値に基づいて長方形を描画しようとしている – ehhpitome
https://plnkr.co/edit/noI7d7iiWAVycAQsxddf?p=info – ehhpitome