D3 更新刻度值而不更新域

Question

我有一个带有长刻度名称的 x 轴，我想提供它们的缩写作为刻度值。长刻度名称用于设置域。

        axisElement = d3.axisBottom(scale)
            .tickValues(tickValues); // these are long names when axis is first drawn
        chart.append("g")
            .attr("class", "bottomAxis")
            .attr("transform", "translate(0, " + height + ")")
            .call(axisElement); 

我首先使用看起来像this 的适当长名称绘制轴，然后尝试使用 D3 中的axis.tickValues() 函数更新刻度。

updateTicks(tickValues) {
        chart.select(".bottomAxis").call(this.axisElement.tickValues(tickValues));
    }

但是当 D3 绘制刻度时，它使用了旧的标度域值（即长名称）并弄乱了缩写名称的定位。它看起来像this。我还收到以下错误：

Error: <g> attribute transform: Expected number, "translate(NaN,0)".

我相信，它是说它试图根据旧的域值翻译刻度，但找到了缩写值，因此无法翻译。

我尝试将秤的域更改为缩写名称，然后 D3 将它们适当地定位。

我的问题是，是否可以在不更改域值的情况下更改 tickValues？

Answer 1

您可以按照以下方式进行操作。您需要在 svg 元素上调用 axisBottom，然后使用 tickFormat 设置缩写文本值。我在小提琴中加入了一个小例子来展示给你看。在示例中，我首先默认设置长刻度值，然后将其更改为您想要的缩写值。

var abbr = ["ll1", "ll2", "ll3", "ll4"];

svg
  .call(d3.axisBottom(x).tickFormat(function(d, i) {
    return abbr[i];
  }));

JSFiddle - https://jsfiddle.net/tkw07c96/