轴未在D3图中显示

伊梅斯汀

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

我的问题是,轴未显示在SVG画布上。使用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图纸正在工作。

汤姆·香利

xScale域和范围需要一个值数组,例如:

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

其次,该轴位于画布底部之外,因此需要向上调整,例如:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章