<!DOCTYPE html>
<html>
<head>
<script type = text/javascript src = https://d3js.org/d3.v4.min.js></script>
</head>
<body>
<script>
var data = [100, 200, 300, 350, 400, 250]
var width = 500, barHeight = 20, margin = 1;
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([100, 400]);
var svg = d3.select(body)
.append(svg)
.attr(width, width)
.attr(height, barHeight * data.length);
var g = svg.selectAll(g)
.data(data)
.enter()
.append(g)
.attr(transform, function (d, i) {
return translate(0, + i * barHeight + );
});
g.append(rect)
.attr(width, function (d) {
return scale(d);
})
.attr(height, barHeight - margin)
g.append(text)
.attr(x, function (d) { return (scale(d)); })
.attr(y, barHeight / 2).attr(dy, .35em)
.text(function (d) { return d; });
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。