d3 v4 js：屬性錯誤

Question

我對數據vizualisation和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".

，它告訴我，它是在這條線：

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

我沒有把我所有的代碼（271線），我不知道這是需要的。

你對這些錯誤從何而來有任何想法嗎？ 我覺得我試圖添加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>