水平条形图 y 轴对齐方式

Horizontal bar chart y axis alignment

本文关键字：对齐 方式 条形图 水平      更新时间：2023-09-26

我的水平条形图中的 yAxis 有问题。

var data = [0, 0, 0, 4, 0, 0, 0, 0, 18, 0, 0, 0, 52, 14, 0, 16];
var margin = { left: 20, top: 0  },
    width = 420,
    barHeight = 20,
    height = barHeight * data.length;
var xScale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width - margin.left]);
var yScale = d3.scale.linear()
    .domain([0, data.length])
    .range([0, height]);
var chart = d3.select(".degree-hist")
    .attr("width", width)
    .attr("height", barHeight * data.length)
    .append("g")
    .attr("transform", function(d, i) { return "translate(" + margin.left + ", 0)"; });
var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
    .attr("width", xScale)
    .attr("height", barHeight - 1);
bar.append("text")
    .attr("x", function(d) { return xScale(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d > 0 ? d : ""; });
var yAxis = d3.svg.axis()
    .orient('left')
    .scale(yScale)
    .tickSize(2)
    .tickFormat(function(d, i){ return i + 1; })
    .tickValues(d3.range(data.length));
chart.append('g')
    .attr("transform", "translate(0,0)")
    .attr('id','yaxis')
    .call(yAxis);

我在这里说明了这个问题：http://jsfiddle.net/mt556rot/3/

由于某种原因，我没有设法对齐 y 轴标签。我想将标签与它们所属的栏对齐。不过，在我的示例中，它们出现在栏的上边缘。蜱虫也不可见。

有什么想法可以解决这个问题吗？

您不是将条形放在轴标签上的居中，而是从它们开始：

bar.append("rect")
  .attr("width", xScale)
  .attr("height", barHeight - 1)
  .attr("y", -barHeight / 2); <-- added this to center

此外，您的顶部刻度标签被切断，因为您没有考虑top边距：

var chart = d3.select(".degree-hist")
    .attr("width", width)
    .attr("height", barHeight * data.length + margin.top)
    .append("g")
    .attr("transform", function(d, i) { return "translate(" + margin.left + ", " + margin.top + ")"; }); // <-- margin.top into transform with top > 0

最后，您没有为刻度设置任何样式（CSS来自此处）：

#yaxis path,
#yaxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

更新的小提琴。

相关文章：