在d3.js中隐藏一定范围内的轴刻度值

Question

我正在寻找一种方法来隐藏 D3.js 中某个值范围内的轴刻度值。例如，假设我的 y 轴显示从 0 到 100 的值，显示每 20 个值（0、20、40、60、80、100）。现在，如何隐藏某些刻度值而不显示？所以如果我想隐藏值 60 和 80，轴将只显示 0、20、40、100。

让我解释一下为什么会出现这个问题。我之前问过另一个question 如何创建损坏的 y 轴。我收到的答案是在 y 轴的范围和域中添加中点，这确实有效。但是，当您添加中点并且没有明确指定刻度值时，您会在中点上弄得一团糟，因为所有隐藏的刻度值现在都出现在同一个地方。

这是它的外观截图：

解决此问题的方法是隐藏该中点值范围内的刻度值。有一个类似的 question 但在 C3.js 中。

Answer 1

好吧，我是您链接的那个问题中the answer 的作者。我不太喜欢your answer 的地方在于它不是真正的动态。你将如何计算value1 和value2？

我想建议的真正动态的方法是使用scale.invert 来获取刻度，只需使用范围即可。

让我们看看。这是一个简单的折断轴，刻度堆积如山：

var w = 560,
  h = 100;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w + 40)
  .attr("height", h)
  .append("g")
  .attr("transform", "translate(10,0)");
var scale = d3.scaleLinear()
  .domain([0, 20, 800, 1000])
  .range([0, w / 2, w / 2, w]);
var axis = d3.axisBottom(scale)(svg.append("g").attr("transform", "translate(0,50)"));

<script src="https://d3js.org/d3.v4.js"></script>

我要做的只是根据范围填充一个数组。例如，在范围的每 10% 处获取值，从 0% 到 100%：

var tickValuesArray = d3.range(11).map(function(d) {
  return ~~scale.invert(w * (d / 10))
}); 

然后，我用它来设置tickValues：

var w = 560,
  h = 100;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w + 40)
  .attr("height", h)
  .append("g")
  .attr("transform", "translate(10,0)");
var scale = d3.scaleLinear()
  .domain([0, 20, 800, 1000])
  .range([0, w / 2 , w / 2, w]);
var tickValuesArray = d3.range(11).map(function(d) {
  return ~~scale.invert(w * (d / 10))
});
var axis = d3.axisBottom(scale).tickValues(tickValuesArray)(svg.append("g").attr("transform", "translate(0,50)"));

<script src="https://d3js.org/d3.v4.js"></script>

Answer 2

我从question 的其中一个答案中找到了解决方案。

有一种方法可以删除不必要的刻度值：

g.selectAll(".tick")
.each(function (d, i) {
    if ( d > value1 && d < value2 ) {
        this.remove();
    }
});