Question

我正在使用调整轴上刻度的技巧，以便在我的图表上渲染网格效果。我遇到的问题是，由于窗口调整大小，当图表的宽度发生变化时，我无法弄清楚如何调整y轴上的刻度。

我必须初始化图表的代码如下：

  this._xRange = d3.time.scale().range([0, chartWidth]);
  this._yRange = d3.scale.linear().range([chartHeight, 0]);
  this._xAxis = d3.svg.axis().scale(this._xRange)
    .orient("bottom")
    .tickSize(-chartHeight)
    .tickSubdivide(true);
  this._yAxis = d3.svg.axis().scale(this._yRange)
    .orient("left")
    .tickSize(-chartWidth)
    .tickSubdivide(true);

调整图表大小时，我重新计算图表的宽度和高度，并尝试重绘轴。对于y轴，我使用以下代码：

  // Redraw the y axis
  this._yAxis = d3.svg.axis().scale(this._yRange)
    .orient("left")
    .tickSize(-chartWidth)
    .tickSubdivide(true);
  this._chart.call(this._yAxis.orient("left"));

在浏览器控制台中出现以下异常时失败：

DOMException: Failed to execute 'insertBefore' on 'Node': The node before
which the new node is to be inserted is not a child of this node. "Error:
Failed to execute 'insertBefore' on 'Node': The node before which the new
node is to be inserted is not a child of this node.

Answer 1

我相信我已经找到了解决方案。看来我需要删除现有的y轴，创建一个新的生成器，然后将新的生成器添加到图表中。我使用以下代码执行此操作：

  d3.select(".y.ResourceStatsAxis").remove();
  this._yAxis = d3.svg.axis().scale(this._yRange)
    .orient("left")
    .tickSize(-chartWidth)
    .tickSubdivide(true);
  this._chart.append("g")
    .attr("class", "y ResourceStatsAxis")
    .call(this._yAxis);

调整图表大小时修改ticksize

1 个答案: