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个错误：

错误：属性高度：预期长度“ NaN”。

它告诉我它在这条线上：

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

hGDim.h是一个数字

我也有这个错误：

错误：属性y：预期长度“ 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>