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

您可以像下面这样做。您需要在axisBottom元素上调用svg，然后使用tickFormat设置缩写文本值。我在小提琴中加入了一个小例子来向你展示。在示例中，我最初默认情况下首先设置长刻度值，然后将其更改为您想要的缩写值。

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

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

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

D3更新刻度值而不更新域

1 个答案: