这个小提琴解决了你的大部分问题:http: //jsfiddle.net/CtTkP/
解释如下:
- 我不确定您所说的超出图形区域是什么意思。标签应该在里面吗
chart-area
?如果您的意思是在平移时,标签延伸到轴之外,则可以通过clip-path
明智地再使用两个 s 来解决问题,尽管这不允许优雅地淡化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);
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);
}
});
然后代替使用tickValues
for xAxis
and yAxis
,使用tickValues2
.