隐藏d3.js中某个范围内的轴刻度值 [英] Hide axis tick values under a certain range in d3.js

问题描述

我正在寻找一种隐藏在D3.js中某个值范围内的轴刻度值的方法.例如，假设我的y轴显示从0到100的值，每20个显示一次(0、20、40、60、80、100).现在，如何隐藏某些刻度值而不显示出来?因此，如果我要隐藏值60和80，则轴将仅显示0、20、40、100.

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.

让我解释一下为什么会出现这个问题.在此之前，我又问了一个问题如何创建折断的y轴.我收到的答案是在y轴的范围和域中添加中点，这确实有效.但是，当您添加中点并且未明确指定刻度值时，您会在该中点上一团糟，因为所有隐藏的刻度值现在都显示在同一位置.

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:

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

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.

推荐答案

好，我是答案在这个问题上您链接了.在您的答案中，我不太喜欢的是它不是真正的动态.您将如何计算value1和value2?

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?

我想建议的方法是真正的动态方法，它使用scale.invert来获取价格变动，只是使用范围即可.

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>

我要做的只是根据范围填充数组.例如，在范围的每10％(从0％到100％)中获取值:

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

然后，我用它来设置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>

这篇关于隐藏d3.js中某个范围内的轴刻度值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！