javascript - 具有序数尺度的可变带大小

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>