如何告诉 d3 不要重复刻度中的值？答案

【问题标题】：How do I tell d3 to not repeat values in ticks?如何告诉 d3 不要重复刻度中的值？
【发布时间】：2014-09-23 20:14:52
【问题描述】：

我做了一个直方图/条形图。我以整数形式读取频率数据并像这样设置我的 y 轴：

var yScale = d3.scale.linear().range([300, 0]).domain([0, 2]);
var yAxis = d3.svg.axis().scale(yScale).orient(‘left’)
        .tickFormat(d3.format(,.0f));

不幸的是，y 轴重复每个频率多次，如下所示：

如何告诉 d3 停止在 y 轴上重复 y 值？我不想使用.ticks(someNumber)，因为我想让刻度数本身保持灵活。

【问题讨论】：

天哪，那张照片看起来比我想象的要大。
这是因为您将刻度格式设置为仅显示整数；刻度值实际上是不同的。在这种情况下，您必须使用 .tickValues() 明确设置刻度值。
但我在绘制图表之前使用parseInt(datum.frequency) 解析我的频率数据。频率不应该是整数吗？
那么刻度不是整数刻度。如果您知道您将只有您在此处发布的特定值，那么您也可以明确指定刻度值。
如果你想知道最终生成的刻度，你可以使用类似这个答案的东西，然后也许检查唯一性：stackoverflow.com/questions/23297504/…

标签： d3.js

【解决方案1】：

我需要我的动态，这对我有用：[版本 4]

var y = d3.scaleLinear().range([height, 0]);

 var yAxis = d3.axisLeft()
        .scale(y)
        .tickFormat(d3.format("%d"));

      // Reset the axes domains with new data
      y.domain([0, d3.max(data, function (d) { return d.value; })]);


  if (y.domain() [1] < 10) {
            yAxis.ticks(y.domain()[1])

            // 2 ticks
            //yAxis.tickValues(y.domain());
        }

        // Add the y-axis with a transition
        yAxisG
          .transition()
            .duration(500)
            .call(yAxis);

【讨论】：

【解决方案2】：

在您的轴上使用 .ticks(n) 而不是 tickFormat()。 ticks() 函数定义了 d3 应该定位的刻度数 - 它并不总是准确的数字。它自己选择最理智的师单位。 n 默认为 10，但您可以根据域进行更改，因此对于示例数据，您可以将其设置为 3 (0,1,2)。理论上你也可以在数据输入时使用它。

您的图表的范围/高度是否动态取决于数据？在大多数情况下，您不希望这样，因为它是不可预测的。而且，如果您明确设置图表的高度，您确实希望将刻度和标签的数量限制为最适合该大小的数字。

您可能还想查看 https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear_nice 。这允许您为您的分时定义规则。

【讨论】：