我有一个 D3 图表,但只想为 y 轴显示 3 个刻度。
根据数据,有时我会得到 3、4 或 5 个刻度,这让我很难使用 CSS 设置样式。
这是完整的代码:
// Create a new d3
var chart = d3.select('#analytics-chart').append('div').attr('class', 'chart');
chart.append('div').attr('class', 'y-axis');
chart.append('div').attr('class', 'bars-and-x-axis');
var barMargin = '0 2px',
min = 0,
max = d3.max(data, function(d) {
return parseInt(d.value, 10);
});
var bars = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'bars'),
xaxis = d3.selectAll('.bars-and-x-axis').append('div').attr('class', 'x-axis'),
yaxis = d3.selectAll('.y-axis'),
xScale = d3.scale.linear().domain([1, data.length]),
yScale = d3.scale.linear().range(0, 100).domain([min, max]),
barWrapper = bars.selectAll()
.data(data.map(function(d) {
return d.value;
}))
.enter()
.append('div')
.attr('class', function(d, i) {
if (d == 0) {
return 'chart-data-wrapper empty';
} else {
return 'chart-data-wrapper';
}
}).style('margin', barMargin);
var bar = barWrapper.append('div').attr('class', 'chart-data-bar')
.style('height', function(d) {
return Math.ceil((d - min) / (max - min) * 100) + 'px';
})
.append('div')
.attr('class', 'tooltip')
.attr('style', function(d, i) {
return 'left: ' + Math.ceil(i / data.length * 100) + '%; transform: translateX(-' + Math.ceil(i / data.length * 100) + '%); ';
})
.append('p')
.text(function(d, i) {
return data[i].date;
})
.append('p')
.attr('class', 'data')
.text(function(d, i) {
return data[i].content;
});
xaxis.selectAll()
.data(xScale.ticks(12))
.enter()
.append('div')
.attr('class', 'x-axis-mark');
yaxis.selectAll()
.data(yScale.ticks(3))
.enter()
.insert('small', ':first-child')
.attr('class', 'label')
.text(function(d, i) {
if (d > 999) {
d = d / 1000 + 'k';
}
return d;
});
var tick = d3.selectAll('.x-axis-mark')
.append('div')
.attr('class', function(d, i) {
if (i % 3 == 1) {
return 'x-axis-tick-with-label';
} else {
return 'x-axis-tick';
}
});
var label = d3.selectAll('.x-axis-mark')
.append('small')
.attr('class', 'label')
.text(function(d, i) {
var format = d3.time.format('%b');
return data[i].xlabel;
})
.attr('class', function(d, i) {
if (i % 3 != 1) {
d3.select(this).remove();
}
});
编辑 - 我添加了完整的代码并附上了下面工作示例的图像: