在 D3 条形图中，y 轴序数刻度未与条形正确对齐

In D3 bar graph, y-axis ordinal scale is not aligning properly with bars

本文关键字：对齐 条形图 D3 序数      更新时间：2023-09-26

我正在遵循迈克的教程 让我们为 d3 中的条形图制作一个条形图第二部分、第三部分。
我最终得到了一个水平条形图。
问题是我无法设置与其各自条对齐的 y 轴标签，也许我在序数比例或设置条形的 y 位置方面有问题。
此外，图形条从顶部而不是基线开始。

	var options = {
	  margin: {
	    top: 0,
	    right: 30,
	    bottom: 0,
	    left: 50
	  },
	  width: 560,
	  height: 400,
	  element: 'body',
	  colors: ["#f44336", "#e91e63", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]
	};
	options.mWidth = options.width - options.margin.left - options.margin.right;
	options.mHeight = options.height - options.margin.top - options.margin.bottom;
	var _colorScale = d3.scale.ordinal()
	  // .domain([minValue,maxValue])
	  .range(options.colors);
	var items = Math.round((Math.random() * 10) + 3);
	var data = [];
	for (var i = 0; i < items; i++) {
	  data.push({
	    label: 'label' + i,
	    value: Math.random() * 100
	  });
	}
	var _barThickness = 20;
	var width = options.mWidth,
	  height = options.mHeight;
	var svg = d3.select(options.element)
	  .append("svg")
	  .attr("width", width).attr("height", height)
	  .attr("viewBox", "0 0 " + options.width + " " + options.height)
	  //.attr("preserveAspectRatio", "xMinYMin meet")
	  .append("g");
	svg.attr("transform", "translate(" + options.margin.left * 2 + "," + options.margin.top + ")");
	var maxValue = 0,
	  minValue = 0;
	for (var i = 0; i < data.length; i++) {
	  maxValue = Math.max(maxValue, data[i].value);
	  minValue = Math.min(minValue, data[i].value);
	}
	var scales = {
	  x: d3.scale.linear().domain([0, maxValue]).range([0, width / 2]),
	  y: d3.scale.ordinal().rangeRoundBands([0, height], .1)
	}
	scales.y.domain(data.map(function(d) {
	  return d.label;
	}));
	var bars = svg.append("g")
	  .attr("class", "bar");
	var xAxis = d3.svg.axis()
	  .scale(scales.x)
	  .orient("bottom")
	  .ticks(5);
	var yAxis = d3.svg.axis()
	  .scale(scales.y)
	  .orient("left");
	var xaxis = svg.append("g")
	  .attr("class", "x axis")
	  .attr('transform', 'translate(' + 0 + ',' + height + ')')
	  .call(xAxis)
	  .append("text")
	  .attr("x", width / 2)
	  .attr("dy", "3em")
	  .style("text-anchor", "middle")
	  .text("Durations in hours");
	var yaxis = svg.append("g")
	  .attr("class", "y axis")
	  .attr('transform', 'translate(' + 0 + ',' + 0 + ')')
	  .call(yAxis)
	  .append("text")
	  .attr("transform", "rotate(-90)")
	  .attr("y", -options.margin.left)
	  .attr("x", -height / 2)
	  .attr("dy", ".71em")
	  .style("text-anchor", "middle")
	  .text("Labels");
	var bar = bars.selectAll('rect.bar').data(data);
	var rect = bar.enter()
	  .append('g')
	  .attr('transform', function(d, i) {
	    return 'translate(0,' + parseInt(i * _barThickness + 2) + ')';
	  });
	rect.append('rect')
	  .attr('class', 'bar')
	  .attr('fill', function(d) {
	    return _colorScale(d.value);
	  })
	.attr('width', function(d) {
	    return scales.x(d.value);
	  })
	  .attr('height', _barThickness - 1)
	  .attr('y', function(d, i) {
	    return (i * _barThickness);
	  })
	 rect.append('text')
	  .attr('x', function(d) {
	    return scales.x(d.value) + 2;
	  })
	  .attr('y', function(d, i) {
	    return (i * _barThickness);
	  })
	  .attr('dy', '0.35em')
	  .text(function(d) {
	    return Math.round(d.value);
	  });
svg {
  width: 100%;
  height: 100%;
}
text {
  font-size: 0.8em;
  line-height: 1em;
}
path.slice {
  stroke-width: 2px;
}
polyline {
  opacity: .3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
.axis {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

问题 1：

取而代之的是：

  var _barThickness = 20;

这样做：

  var _barThickness = scales.y.rangeBand();

在这里阅读

如果要调节厚度

取而代之的是：

y: d3.scale.ordinal().rangeRoundBands([0, height], .1)

这样做：

y: d3.scale.ordinal().rangeRoundBands([0, height], .7)

问题2：

转换不正确。

取而代之的是：

var rect = bar.enter()
  .append('g')
  .attr('transform', function(d, i) {
    return 'translate(0,' + parseInt(i * _barThickness + 2) + ')';
  });

这样做：

var rect = bar.enter()
  .append('g');

问题3：

柱线的 y 计算不正确。

  .attr('y', function(d, i) {
    return (i * _barThickness);
  })

这样做：

  .attr('y', function(d, i) {
    return scales.y(d.label);
  })

工作代码在这里

相关文章：