这个代码片段可以解决你的大部分问题:
http://jsfiddle.net/CtTkP/。以下是一些解释:
- 我不确定你所说的“超出图形区域”的意思是什么。标签应该放在
chart-area
里吗?如果你的意思是在拖动时,标签会超出轴线,这个问题可以通过巧妙地使用两个额外的clip-path
来解决,但这不允许像svg.axis
翻译那样优雅地淡化数值:
var clipX = svg.append("clipPath")
.attr('id', 'clip-x-axis')
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', margin.bottom);
svg.append("g")
.attr("class", "x axis")
.attr('clip-path', 'url(#clip-x-axis)')
.attr("transform", "translate(0, " + height + ")")
.call(xAxis);
// ...
var clipY = svg.append("clipPath")
.attr('id', 'clip-y-axis')
.append('rect')
.attr('x', - margin.left)
.attr('y', 0)
.attr('height', height)
.attr('width', margin.left);
svg.append("g")
.attr("class", "y axis")
.attr('clip-path', 'url(#clip-y-axis)')
.call(yAxis);
为了防止缩放超出限制,您需要手动限制缩放的
translate
值:
function zoomed() {
var trans = zoom.translate(),
scale = zoom.scale();
tx = Math.min(0, Math.max(width * (1 - scale), trans[0]));
ty = Math.min(0, Math.max(height * (1 - scale), trans[1]));
zoom.translate([tx, ty]);
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
这将防止图形超出限制范围。
- 由于您显式地覆盖了
tickValues
,因此您可以调整值以使其居中:
var tickValues2 = [];
tickValues.forEach(function (t, idx) {
if (idx < tickValues.length - 1) {
tickValues2.push((t + tickValues[idx + 1]) / 2);
}
});
然后,不要使用xAxis
和yAxis
的tickValues
,而是使用tickValues2
。