D3 Pan Zoom Overflow

Question

我想知道你是否可以在下面的小提琴中帮助我完成下面的D3js Zoom和平移功能:http://jsfiddle.net/moosejaw/nUF6X/5/

我希望代码(虽然不是很好)是直截了当的.

我的图表总染色体长度与总染色体长度有关.刻度值是每条染色体的个体长度(总数).刻度被格式化为染色体的名称(对最终用户来说看起来不错).

我遇到的问题是:

1. x轴和y轴标签延伸到图形区域之外.当我没有明确提供刻度值时,标签会"消失".看到:

   var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .tickValues(tickValues)
   .tickFormat(function(d) { 
       var ret = bpToChrMBP(d);
       return ret.chr;
   });
   

2. 如何防止x轴在最小值之前不向左平移？还没有向右移过最大值？无论我是否放大,都会发生这种情况.(y轴相同,顶部和底部除外).

3. 有没有办法在刻度线之间"居中"轴标签.刻度线的间距不均匀.我尝试使用细分为次要刻度线,但是没有正确地在刻度线之间进行细分.

任何帮助将不胜感激!

马特

Answer 1

这个小提琴解决了你的大多数问题:http://jsfiddle.net/CtTkP/ 解释如下:

• 我不确定你的意思是延伸到图表区域之外.如果该标签是insde的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);
    }
});

然后,而不是使用tickValues了xAxis和yAxis,使用tickValues2.