html D3byEX 4.10：带边距和轴的条形图（适用于D3.js v4）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html D3byEX 4.10：带边距和轴的条形图（适用于D3.js v4）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<head>
<script src='http://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/d3-selection-multi.v1.min.js'></script>
<meta name='description'
content='D3.js v4, .axisLeft, .scaleLinear, Left Axis' />
</head>
<body>
<script>
var data = [55, 44, 30, 23, 17, 14, 16, 25, 41, 61, 85, 101, 95, 105,
114, 150, 180, 210, 125, 100, 71, 75, 72, 67];
var barWidth = 20, barPadding = 3;
var maxValue = d3.max(data);
var graphWidth = data.length * (barWidth + barPadding) - barPadding;
var margin = { top: 10, right: 10, bottom: 10, left: 50 };
var totalWidth = graphWidth + margin.left + margin.right;
var totalHeight = maxValue + margin.top + margin.bottom;
var svg = d3.select('body').append('svg')
.attr('width', totalWidth).attr('height', totalHeight);
svg.append('rect')
// selection multi
.attrs({width: totalWidth, height: totalHeight,
fill: 'white', stroke: 'black', 'stroke-width': 1});
var mainGroup = svg
.append('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
mainGroup.append('rect')
.attrs({fill: 'rgba(0,0,0,0.1)',
width: totalWidth - (margin.left + margin.right),
height: totalHeight - (margin.bottom + margin.top)});
function xloc(d, i) { return i * (barWidth + barPadding); }
function yloc(d) { return maxValue - d; }
function translator(d, i) {
return 'translate(' + xloc(d, i) + ',' + yloc(d) + ')'; }
var barGroup = mainGroup.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', translator);
barGroup.append('rect')
.attrs({fill: 'steelblue', width: barWidth,
height: function (d) { return d; } });
var textTranslator = 'translate(' + barWidth / 2 + ',0)';
barGroup.append('text')
.text(function(d) { return d; })
.attrs({fill: 'white', 'alignment-baseline': 'before-edge',
'text-anchor': 'middle', transform: textTranslator})
.style('font', '10px sans-serif');
var leftAxisGroup = svg.append('g');
var axisPadding = 3;
leftAxisGroup.attr('transform',
'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')');
var scale = d3.scaleLinear() // v4
.domain([maxValue, 0]) // inverted
.range([0, maxValue]);
var axis = d3.axisLeft() // v4
.scale(scale);
var axisNodes = leftAxisGroup.call(axis);
</script>
</body>
</html>
以上是关于html D3byEX 4.10：带边距和轴的条形图（适用于D3.js v4）的主要内容，如果未能解决你的问题，请参考以下文章