d3 v4 js：属性エラー

Question

私はデータの可視化とJavaScriptにはとても新しいので、d3 v4を使用して棒グラフのヒストグラムを作成しようとしています。 私はまずd3 v3で作業していましたが、すべてうまくいっていましたが、私はv4で作業する必要があることを知りました。ここで

は、私のコードの一部です：

 ... 
    // create function for x-axis mapping. 
    var x = d3.scaleBand().rangeRound([0, hGDim.w]).padding(0.1) 
      .domain(fD.map(function(d) { return d[0]; })); 

    var xAxis = d3.axisBottom() 
    .scale(x); 


    // Create function for y-axis map. 
    var y = d3.scaleBand().rangeRound([0, hGDim.h]) 
      .domain([0, d3.max(fD, function(d) { return d[1]; })]); 

    var yAxis = d3.axisBottom() 
    .scale(y); 

    // Create bars for histogram to contain rectangles and freq labels. 
    var bars = hGsvg.selectAll(".bar").data(fD).enter() 
      .append("g").attr("class", "bar"); 

    //create the rectangles. 
    bars.append("rect") 
     .attr("x", function(d) { return x(d[0]); }) 
     .attr("y", function(d) { return y(d[1]); }) 
     .attr("width", x.bandwidth()) 
     .attr("height", function(d) { return hGDim.h - y(d[1]); }) 
     .attr('fill',barColor) 
     .on("mouseover",mouseover)// mouseover is defined below. 
     .on("mouseout",mouseout);// mouseout is defined below. 

    //Create the frequency labels above the rectangles. 
    bars.append("text").text(function(d){ return d3.format(",")(d[1])}) 
     .style("font-family", "sans-serif") 
     .attr("x", function(d) { return x(d[0])+x.bandwidth()/2; }) 
     .attr("y", function(d) { return y(d[1])-5; }) 
     .attr("text-anchor", "middle"); 
     ... 

これを実行しようとすると、私はこの2個のエラーがあります：

Error: attribute height: Expected length, "NaN".

をそして、それはそれは、このライン上だと私に語った：

.attr("height", function(d) { return hGDim.h - y(d[1]); }) 

hGDim.h数値

私もこのエラーがあります：

Error: attribute y: Expected length, "NaN".

をそして、それはそれは、このライン上だと私に語った：私はすべての私のコード（271行）を入れていない

.attr("y", function(d) { return y(d[1])-5; }) 

、私はわかりませんここに必要です。

これらのエラーの原因は何ですか？ 私は異なるタイプの2つの変数を追加しようとしているように感じます...しかし、それはv3でうまくいきました。

Answer 1

あなたはyスケールを連続尺度のように扱いますが、x尺度のように序数でなければなりません（scaleBand（）は序数です）。次のように作成した矩形コードを変更する必要があり、そして

var y = d3.scaleBand() 
    .rangeRound([0, hGDim.h]) 
    .domain(fD.map(function(d) {return d[1];})); 

：これを試すここ

bars.append("rect") 
    .attr("x", function(d) { return x(d[0]); }) 
    .attr("y", function(d) { return y(d[1]); }) 
    .attr("width", x.bandwidth()) 
    .attr("height", y.bandwidth()) 
    .attr('fill', barColor) 
    .on("mouseover", mouseover) 
    .on("mouseout", mouseout); 

は、D [0]及びdを仮定すると、最小の例である[1]ヒートマップ上の座標であります：それはだ場合

var data = [[1, 1, "red"], [1, 2, "blue"], [1, 3, "green"], 
 
    [2, 1, "navy"], [2, 2, "yellow"], [2, 3, "orange"], 
 
    [3, 1, "red"], [3, 2, "blue"], [3, 3, "red"]], 
 
    svg = d3.select("svg"), 
 
    w = 500, 
 
    h = 500, 
 
    x = d3.scaleBand() 
 
    .rangeRound([0, w]) 
 
    .padding(0.1) 
 
    .domain(data.map(function(d) {return d[0];})), 
 
    y = d3.scaleBand() 
 
    .rangeRound([0, h]) 
 
    .padding(0.1) 
 
    .domain(data.map(function(d) {return d[1]})), 
 
    xAxis = d3.axisBottom() 
 
    .scale(x), 
 
    yAxis = d3.axisBottom() 
 
    .scale(y), 
 
    bars = svg.selectAll(".bar") 
 
    .data(data).enter() 
 
    .append("g") 
 
    .attr("class", "bar"); 
 

 
bars.append("rect") 
 
    .attr("x", function(d) { return x(d[0]); }) 
 
    .attr("y", function(d) { return y(d[1]); }) 
 
    .attr("width", x.bandwidth()) 
 
    .attr("height", y.bandwidth()) 
 
    .style("fill", function(d) { return d[2]; });

<script src="https://d3js.org/d3.v4.js"></script> 
 
<svg height="500px", width="500px"></svg>