Question

我使用d3 v4做了一个水平条形图，除了一件事情以外它工作得很好。我无法使杆高度固定。我目前正在使用带宽（），如果我用固定值替换它，说（15）问题是它没有与y轴标签对齐/ http://jsbin.com/gigesi/3/edit?html,css,js,output

var w = 200;
var h = 400;
var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("transform", "translate(80,30)");

var data = [
            {Item: "Item 1", count: "11"},
            {Item: "Item 2", count: "14"},
            {Item: "Item 3", count: "10"},
            {Item: "Item 4", count: "14"}
           ];

var xScale = d3.scaleLinear()
               .rangeRound([0,w])
               .domain([0, d3.max(data, function(d) {
                   return d.count;
               })]);

var yScale = d3.scaleBand()
               .rangeRound([h,0]).padding(0.2)
               .domain(data.map(function(d) {
                   return d.Item;
             }));

var yAxis = d3.axisLeft(yScale);
svg.append('g')
   .attr('class','axis')
   .call(yAxis);
svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
       .attr('width', function(d,i) {
           return xScale(d.count);
        })
       .attr('height', yScale.bandwidth())
       .attr('y', function(d, i) {
           return yScale(d.Item);
       }).attr("fill","#000");

Answer 1

您提供的链接中的 y轴似乎已关闭 SVG 。（也许你有SVG的overflow: visible;。

无论如何，我在图表中添加了一些边距，以便整个图表可见。这是（忽略链接描述）：

DEMO: H BAR CHART WITH HEIGHT POSITIONING TO THE TICKS

相关代码更改：

当您使用比例尺时，将在其中计算高度。您只需使用.bandWidth()。
```
.attr('height', yScale.bandwidth())
```
添加了边距并转换了轴和条形图以使整个图表可见：：我指定了边距，以便y-axis位于SVG的视口内，这样可以更容易地根据刻度值调整左边距。我认为这应该是一种标准做法。另外，如果您注意到，rects即栏现在是<g class="bars"></g>的一部分。如果您愿意，请检查DOM。这对于具有大量元素的复杂图表非常有用，但它始终是一种很好的做法。
```
var margin = {top: 10, left: 40, right: 30, bottom: 10};

var xScale = d3.scaleLinear()
      .rangeRound([0,w-margin.left-margin.right])

var yScale = d3.scaleBand()
     .rangeRound([h-margin.top-margin.bottom,0]).padding(0.2)

svg.append('g')
   .attr('class','axis')
   .attr('transform', 'translate(' + margin.left+', '+margin.top+')')
```

尝试更改数据，条形高度将根据刻度调整和对齐。希望这可以帮助。如果您有任何问题，请告诉我。

修改最初，我认为你将问题放在y刻度的中心时遇到了问题，但正如你所说，你需要固定的高度条，这里有一个快速添加到上面的代码，让你这样做。我将很快使用填充（内部和外部）添加另一种方法。

Updated JS BIN

要将条准确定位在轴刻度线的位置，我将条形图从顶部移动到由.bandWidth()计算的比例带宽这将是它从刻度线开始的位置，现在从它减去一半所需高度，以便条形图的中心与刻度线y匹配。希望这能解释。

.attr('height', 15) .attr('transform', 'translate(0, '+(yScale.bandwidth()/2-7.5)+')')

D3 v4 - 制作一个固定宽度的水平条形图

1 个答案: