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>