删除D3 y轴中的空白区域

Question

我正在使用d3js生成折线图。一些数据彼此重叠。像这样：

（见底部的4行）。这是删除其余部分后这4行的样子：

我想要做的是以某种方式移除那些没有数据的空垂直空间。

任何可能的方法吗？

Answer 1

非线性y缩放可以解决您的问题 例如， .scalePow 或 .logScale 而不是 .scaleLinear ：

var y = d3.scalePow()
  .exponent(0.3)
  .domain([0, 1000, 10000, 60000])
  .range([height, 0]);

请参阅updated fiddle。

Answer 2

你想要的是一个破碎的Y轴。像这样：

在我们继续之前，非常重要的是，告诉用户轴是否已经清楚明确地破坏了。并在轴上添加一些符号，表明它已损坏：

否则，您撒谎数据！

回到你的问题：要创建一个破损的Y轴，你只需要在你的y尺度上添加中点（在域和范围内）。

让我们在演示中看到这一点。这是一个基本图表，您可以看到低端有一堆线（y轴中位于0和12之间），就像您的图表一样：

var w = 400, h = 300;
var data = [1, 3, 4, 7, 10, 11, 12, 160, 180, 210, 230];
var svg = d3.select("body")
	.append("svg")
  .attr("width", w)
  .attr("height", h);
var scale = d3.scaleLinear()
	.domain([0, 230])
  .range([h - 4, 4]);
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var lines = svg.selectAll(null)
	.data(data)
  .enter()
  .append("line")
  .attr("x1", 30)
  .attr("x2", w)
  .attr("y1", function(d){ return scale(d)})
  .attr("y2", function(d){ return scale(d)})
  .style("stroke", function(d, i){ return colors(i)})
  .style("shape-rendering", "crispEdges");
var axis = d3.axisLeft(scale)(svg.append("g").attr("transform", "translate(30,0)"))

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

很难说出这里的价值观。所以，让我们打破Y轴，在比例尺中创建中点。在我的演示中，我做到了这一点：

var scale = d3.scaleLinear()
    .domain([0, 15, 150, 230])
    .range([h - 4, h / 2 , h / 2, 4]);

这意味着15和150之间的所有值都将定位在比例中的同一点。

以下是使用相同数据：

的结果

var w = 500,
  h = 400;
var data = [1, 3, 4, 7, 10, 11, 12, 160, 180, 210, 230];
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);
var scale = d3.scaleLinear()
  .domain([0, 15, 150, 230])
  .range([h - 4, h / 2, h / 2, 4]);
var colors = d3.scaleOrdinal(d3.schemeCategory10);
var lines = svg.selectAll(null)
  .data(data)
  .enter()
  .append("line")
  .attr("x1", 30)
  .attr("x2", w)
  .attr("y1", function(d) {
    return scale(d)
  })
  .attr("y2", function(d) {
    return scale(d)
  })
  .style("stroke", function(d, i) {
    return colors(i)
  })
  .style("shape-rendering", "crispEdges");
var axis = d3.axisLeft(scale).tickValues([0, 5, 10, 15, 160, 180, 200, 220])(svg.append("g").attr("transform", "translate(30,0)"))

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

当然，我必须明确设置刻度值。