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