顺序轴上的变量rangeRounds d3

Question

我想创建一个具有不同大小的rangeRounds或band的序数轴。使用线性轴非常直接地做到这一点但是想知道它是否可以用序数轴做到这一点。我想知道我是否使用范围并具有明确的值，但似乎也无法使其工作。 我正试图创造这种东西：

Answer 1

您无法获得带级（d3.scaleBand()）的可变波段。但是，以常规序数（d3.scaleOrdinal()）获取可变间隔非常简单。

例如：

var scale = d3.scaleOrdinal()
  .domain(["Lemons", "Oranges", "Pears", "Apples", "Bananas"])
  .range([10, 40, 100, 150, 180, 290]);

唯一复杂的事情是将刻度线移动到轴的中心......但它并不复杂：

axisGroup.selectAll("text").each(function(d, i) {
  d3.select(this).attr("transform", "translate(0," + (scale.range()[i + 1] - scale(d)) / 2 + ")")
})

这是一个演示：

var svg = d3.select("svg");
var scale = d3.scaleOrdinal()
  .domain(["Lemons", "Oranges", "Pears", "Apples", "Bananas"])
  .range([10, 40, 100, 150, 180, 290]);

var rects = svg.selectAll(null)
  .data(scale.domain())
  .enter()
  .append("rect")
  .attr("x", 100)
  .attr("width", 200)
  .attr("y", function(d) {
    return scale(d)
  })
  .attr("height", function(d, i) {
    return scale.range()[i + 1] - scale(d)
  })
  .style("fill", "#ccc")
  .style("stroke", "white")
  .style("stroke-width", 2)

var axis = d3.axisLeft(scale);

var gY = svg.append("g")
  .attr("transform", "translate(100,0)")
  .call(axis);

gY.selectAll("text").each(function(d, i) {
  d3.select(this).attr("transform", "translate(0," + (scale.range()[i + 1] - scale(d)) / 2 + ")")
})

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