D3 图中未显示的轴

Question

我正在尝试创建热图。代码在 Codepen 上：https://codepen.io/imestin/pen/qBOpodX?editors=1010

我的问题是，轴没有显示在 SVG 上 canvas。使用 Web 开发人员工具检查它，我可以看到元素。

这些是我认为在绘制轴（对于 x 轴）时很重要的线：

    let minYear = d3.min(data, d => d.year );
    let maxYear = d3.max(data, d => d.year );
    let xScale = d3.scaleLinear()
                 .domain(minYear,maxYear)
                 .range(0,canvasX);

   //xAxis - needs xScale
   let xAxis = d3.axisBottom(xScale);

   //X-axis draw
   Canvas.append("g")
    .attr("id","x-axis")
    .attr("class","tick")
    .attr("transform", "translate(" + (edge) + ", " + (canvasY) + ")")
    .call(xAxis)

其他元素绘制正确，基本 SVG 绘图正常。

Answer 1

xScale 域和范围需要一个值数组，例如：

xScale = d3.scaleLinear()
.domain([minYear,maxYear])
.range([0,canvasX]);

其次，轴位于canvas的底部，因此需要向上调整，例如：

Canvas.append("g")
.attr("id","x-axis")
.attr("class","tick")
.attr("transform", "translate(" + (edge) + ", " + (canvasY - 20) + ")")
.call(xAxis)

D3 图中未显示的轴

Axes not showing in D3 diagram

javascript

diagram

svg

heatmap

d3.js