javascript – D3 Pan Zoom Overflow

我想知道如果您可以帮助我在以下小提琴中使用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.