如何修复TypeError：D3中出现“无法读取未定义的属性'tick's”错误？

Question

我正在尝试使用D3将以前清理过的外部数据渲染成可视化。我收到一个错误消息，说即使我在代码的前面定义了它，也无法读取未定义元素的属性。

我尝试在draw()函数中进行编辑，在该函数中，我尝试根据外部数据简单地渲染轴。数据是一个.tsv，只有2行相关数据符合我当前的目标。

var myData = d3.tsv('https://raw.githubusercontent.com/natephil/jeopardy/gh-pages/teddy_test.tsv')

var yScale = null;

var margin = {
    top: 0,
    bottom: 40,
    left: 20,
    right: 10
};
var width = 700;
var height = 520;

function draw(initialData) {
    var xScale = d3.scaleOrdinal()
        .domain(d3.range(initialData.length))
        .range([0, width])

    var yScale = d3.scaleLinear()
        .domain([0, d3.max(initialData)])
        .range([0, height]);

    //create an svg element
    var svg = d3.select("#myViz")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.selectAll("rect")
        .data(initialData)
        .enter()
        .append("rect")
        .attr("x", function(d, i) {
            return xScale(i);
        })
        .attr("y", function(d) {
            return height - yscale(d);
        })
        .attr("width", xScale.range())
        .attr("height", function(d) {
          return yScale(d);
        })
        .attr("fill", "steelblue");

    var x = d3.scaleLinear().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var xAxis = d3.axisBottom().scale(x)
        .scale(xScale)
        .tickFormat(function (d) { return d; });

    var yAxis = d3.axisLeft() // this is where I define "y axis"
        .scale(yAxis)
        .tickFormat(function (d) { return d; });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", 'translate(0,' + height + ')')
        .call(xAxis)

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis); //this is where the error is being called
}

draw(myData);

我只是想渲染我的轴，然后能够在此之上绘制元素。