轴未显示在D3中

Question

我在d3中创建了条形图，似乎javascript的执行正挂在创建轴上，结果没有轴显示，因此创建轴后控制台日志不起作用。 这是我的代码：

req.onload=function() {
    const dataset = json.data;
    const w = 880;
    const h = 440;
    const yScale = d3.scaleLinear();
    yScale.domain([0,d3.max(dataset, (d) => d[1])]);
    yScale.range([10,h]) // axis will start at 10

    const svg = d3.select('body')
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

    svg.selectAll("rect")
        .select("body")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", (d, i) => {
          return i * 3.2;
        })
        .attr("y", (d) => {
          return (h - yScale(d[1]));
        })
        .attr("width", 3.2 * .95)
        .attr("height", (d, i) => {
          return (yScale(d[1]));
        })
        .attr("class", "bar")
        .append("title")
        .text((d) => {
          return d[0];
        })

    console.log('one') // logs

    const xAxis = d3.axisBottom(xScale);  // PROBLEM 
    console.log('two')  // won't log
    svg.append("g")
        .attr("transform", "translate(0," + (h) + ")")
        .call(xAxis);

    console.log('three') // won't log

    const yAxis = d3.axisLeft(yScale);
    svg.append("g")
        .attr("transform", "translate(100,50)")
        .call(yAxis);

    console.log('four'); // won't log
  };
  console.log('this will log')
});

似乎调用axisBottom（）是问题，但我不确定为什么。 d3文档不是很详细，但是说该功能是d3。 axisBottom （ 刻度 ）

Answer 1

确实是一个愚蠢的错误。 未定义xAxis。 我在Codepen中进行开发，因此没有看到控制台错误消息。 决定创建一个文件并在chrome中打开它，并在一秒钟之内解决。 这里的课程是避免使用Codepen进行调试。