Question

我的水平条形图中的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轴标签。我想将标签与他们所属的酒吧对齐。在我的例子中，它们出现在栏的上边缘。滴答声也不可见。

任何想法如何解决这个问题？

Answer 1

你没有将这些条中心放在轴标签上，它们是从它们开始的：

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

最后，你没有为你的标记设置任何样式（来自here的CSS）：

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

更新了fiddle。

水平条形图y轴对齐

1 个答案: