我想知道如果您可以帮助我在以下小提琴中使用D3js Zoom和pan功能：
http://jsfiddle.net/moosejaw/nUF6X/5/
我希望代码(虽然不是很好)直截了当.
我有一个总染色体长度总染色体长度的图表.蜱值是每个染色体的个体长度(总数).刻度被格式化为染色体的名称(对最终用户来说看起来不错).
我遇到的问题是：
> x轴和y轴标签在图形区域外延伸.当我没有明确提供滴答值时,标签“消失”,因为它们应该.看到：
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(tickValues)
.tickFormat(function(d) {
var ret = bptochrMBP(d);
return ret.chr;
});
>如何防止x轴在最小值之前不向左平移？还没有平移到正确的最大值？无论我是否放大,都会发生这种情况.(y轴除了顶部和底部也一样).
>有没有办法将轴标签“中心”在刻度线之间.刻度线不均匀.我尝试使用细分为小刻度线,但是不会正确地细分刻度线.
任何帮助将不胜感激！
马特
解决方法
这个小提琴解决了大部分的问题：
http://jsfiddle.net/CtTkP/
解释如下：
解释如下：
>我不知道你的意思是延伸到图形区域之外.标签是否应该在图表区域内？如果你的意思是在平移,标签超出轴,可以通过使用两个更多的剪辑路径明智地解决问题,虽然这不允许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);
}
});
然后,使用tickValues2代替对于xAxis和yAxis使用tickValues.