带序刻度的可变带大小

Question

I'd like to create an ordinal axis with varying sizes of rangeRounds or bands. Its fairly straight forward to do this using a linear axis but wondered if it where possible to do this with an ordinal axis. I wondered if I use range and have explicit values, but can't seem to make that work either. I'm trying to create this kind of thing:

Answer 1

You cannot get variable bands with a band scale ( d3.scaleBand() ). However, getting variable intervals with a regular ordinal scale ( d3.scaleOrdinal() ) is quite trivial.

For instance:

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

The only complicated thing is moving the ticks to the center of the axis... but it's not that complicated:

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

Here is a demo:

 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>