D3 v4-制作具有固定宽度的水平条形图 [英] D3 v4 - make a horizontal bar chart with fixed width
问题描述
我已经使用d3 v4制作了水平条形图，除了一件事以外，它都可以正常工作.我无法固定杆的高度.我当前正在使用bandwidth()，如果我将其替换为固定值，请说(15)，问题是它与y轴标签/刻度
I have made a horizontal bar chart using d3 v4, which works fine except for one thing. I am not able to make the bar height fixed. I am using bandwidth() currently and if i replace it with a fixed value say (15) the problem is that it does not align with the y axis label/tick 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");
推荐答案
在您提供的链接中， y轴似乎已关闭 SVG .(也许您有 overflow:visible; for the SVG.
The y axis seemed to be off SVG in the link you provided. (Maybe you have overflow: visible; for the SVG.
无论如何，我在图表上添加了一些边距，以便可以看到整个图表.在这里(忽略链接描述):
Anyway, I've added a few margins to the chart so that the whole chart is visible. Here it is (ignore the link description):
相关代码更改:
-
在使用比例尺时，将在其中计算高度.您只需要使用
.bandWidth().
.attr('height', yScale.bandwidth())
添加了一个边距并转换了轴和条以使整个图表可见::我正在分配页边距，以便 y轴位于SVG的视口内，这也使基于刻度值调整左页边距更加容易.我认为这应该是一种标准做法.另外，如果您注意到了， rects 即 bars 现在是< g class ="bars"></g> .如果需要，请检查DOM.这对于具有很多元素的复杂图表很有用，但这始终是一个好习惯.
Added a margin and transformed the axis and the bars to make the whole chart visible :
: I'm assigning margins so that the y-axis is within the viewport of the SVG which makes it easier to adjust the left margin based on the tick value as well. And I think this should be a standard practice.
Also, if you notice, the rects i.e. bars are now a part of <g class="bars"></g>. Inspect the DOM if you'd like. This would be useful for complex charts with a LOT of elements but it's always a good practice.
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+')')
尝试更改数据，栏高将根据刻度进行调整和对齐.希望这可以帮助.如果您有任何问题，请告诉我.
Try changing the data and the bar height will adjust and align according to the ticks. Hope this helps. Let me know if you have any questions.
最初，我认为您将条形图放置在y刻度的中心时遇到了问题，但是正如您所说的，您需要固定高度的条形图，这是对上面代码的快速补充，可以让您做到这一点.我将在不久的将来使用填充(内部和外部)添加另一种方法.
Initially, I thought you were facing a problem placing the bars at the center of the y tick but as you said you needed fixed height bars, here's a quick addition to the above code that lets you do that. I'll add another approach using the padding (inner and outer) sometime soon.
要将条形图精确地定位在轴刻度的位置，我将条形图从顶部移动到由 .bandWidth()计算的刻度的带宽它将从刻度线开始将其定位，现在从其减去所需高度一半的一半，以使条的中心与刻度线 y 相匹配.希望这能解释.
To position the bar exactly at the position of the axis tick, I'm moving the bar from top to the scale's bandwidth that is calculated by .bandWidth() which will the position it starting right from the tick and now subtracting half of the desired height half from it so that the center of the bar matches the tick y. Hope this explains.
.attr('height', 15)
.attr('transform', 'translate(0, '+(yScale.bandwidth()/2-7.5)+')')
这篇关于D3 v4-制作具有固定宽度的水平条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
