我正在使用 d3.js(4.1 版)制作一个简单的条形图,并且我遵循了官方文档中的示例。这是我的 jsfiddle:
这是我的代码:
html:
<div class="diagram-wrapper">
<div class="barchart">
<div class="header">
<h2>High score</h2>
</div>
<div class="content">
</div>
</div>
</div>
Js:
var data = [{
points: 50,
name: "gunnar"
}, {
points: 100,
name: "herp"
}, {
points: 500,
name: "Jacob"
}];
var width = 420,
barHeight = 20;
var x = d3.scaleLinear()
.range([0, width]);
var chart = d3.select(".diagram-wrapper div.barchart div.content")
.append('svg')
.attr("width", width);
x.domain([0, d3.max(data, function(d) {
return d.points;
})]);
chart.attr("height", barHeight * data.length);
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", function(d) {
return x(d.points);
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) {
return x(d.points) - 3;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) {
return d.points;
});
但我能找到的所有示例都来自版本 3,或者它们使用 TSV og SCV 数据格式......我想要的是这样的:
所以基本上我的问题如下:
如何将条形变为垂直而不是水平?
如何在 x 轴的条形下方添加名称?
如何将一些值添加到 y 轴,然后与这些点相关联?
很抱歉提出所有问题,我确实调查了文档,但是当 4.1 中的工作示例和博客文章泄露时,我无法完全理解它
谢谢
最佳答案
没有简单的方法可以将水平条形图“翻转”为垂直条形图……您几乎必须更改几乎所有代码。在这里,我将展示基本步骤(请注意,我不是在修改您的代码,而是在创建一个新代码)。
首先,数据是一样的。然后,我们附加 SVG:
var width = 400, height = 500;
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
之后,我们定义尺度。 x 轴现在是定性的,而 y 轴是定量的:
var xScale = d3.scaleBand()
.domain(data.map(function(d){ return d.name}))
.range([100, width])
.paddingInner(0.2)
.paddingOuter(0.2);
var yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){ return d.points})])
.range([height - 40, 10]);
然后,我们绑定(bind)数据:
var bars = svg.selectAll(".bars")
.data(data)
.enter()
.append("rect");
在数据有界的情况下,我们附加矩形。这是棘手的部分:注意我们如何计算 x
、y
、width
和 height
:
bars.attr("x", function(d){ return xScale(d.name)})
.attr("y", function(d){ return yScale(d.points)})
.attr("width", xScale.bandwidth())
.attr("height", function(d){ return (height - 40) - yScale(d.points)})
.attr("fill", "steelblue");
然后,坐标轴:
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
svg.append("g").attr("transform", `translate(0,${height-40})`)
.call(xAxis);
svg.append("g").attr("transform", "translate(100,0)")
.call(yAxis);
fiddle 显示代码有效:https://jsfiddle.net/gerardofurtado/o1cer41s/
PS:代码中有一些神奇的数字。另外,我使用的模板文字在您使用 IE 时将不起作用。
关于javascript - d3.js 条形图不太像我想要的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38877299/