隐藏d3.js中某个范围内的轴刻度值

Question

我正在寻找隐藏在D3.js中属于某个值范围的轴刻度值的方法。例如，让我们说我的y轴显示从0到100的值，显示每20个（0,20,40,60,80,100）。现在，如何隐藏某些刻度值？因此，如果我想隐藏值60和80，则轴将仅显示0,20,40,100。

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

以下是它的外观截图：

可以修复的方法是隐藏属于该中点值范围的刻度值。在C3.js中有类似的question。

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();
    }
});