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");
        ...

尝试运行时，我有两个错误：

错误：属性高度：预期长度，“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行），我不确定这里是否需要。

您是否知道这些错误可能来自哪里？我觉得我正在尝试添加两个不同类型的变量......但是，它在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>

d3 v4 js：属性错误

1 个答案: