Hide axis tick values under a certain range in d3.js

问题

I'm looking for a way of hiding axis tick values that fall under a certain range of values in D3.js. For example, let's say my y axis shows values from 0 to 100, showing every 20 of them (0, 20, 40, 60, 80, 100). Now, how would one hide certain tick values from showing up? So if I want to hide values 60 and 80, the axis will only show 0, 20, 40, 100.

Let me explain why that question arose. I asked another question before of how to create a broken y axis. The answer I received was to add midpoints in range and domain of y axis, which really works. BUT, when you add midpoints and don't specify tick values explicitly, you get a mess on that midpoints, since all hiding tick values now appear in the same place.

Here's the screenshot of how it looks:

The way this could be fixed is to hide tick values that fall under a range of values in that midpoint. There is an analogous question but in C3.js.

回答1:

Well, I'm the author of the answer in that question you linked. What I don't quite like in your answer is that it's not really dynamic. How are you going to calculate value1 and value2?

The approach I'd like to suggest, which is truly dynamic, is using scale.invert to get the ticks, simply using the range.

Let's see it. Here is a simple broken axis, with the ticks piling up:

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>

What I'm gonna do is simply populating an array based on the range. For instance, getting the values at every 10% of the range, from 0% to 100%:

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

Then, I use it to set the 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>

回答2:

I found the solution from one of the answers of this question.

There's a way to remove unnecessary tick values:

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

来源：https://stackoverflow.com/questions/48112358/hide-axis-tick-values-under-a-certain-range-in-d3-js

标签

d3.js

data-visualization