D3平移缩放溢出

我在想，如果你能帮助我与follwoing D3js缩放和平移功能在以下小提琴：http://jsfiddle.net/moosejaw/nUF6X/5/D3平移缩放溢出

我希望的代码（虽然不是很大）是直线前进。

我有一个图表，总染色体长度总染色体长度。刻度值是每个染色体的个体长度（总和）。蜱被格式化为染色体的名称（对最终用户来说很好）。

即我遇到的问题是：

的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轴，除了顶部和底部以外）。
有没有办法在刻度线之间“标记”轴标签。刻度线不均匀间隔。我尝试使用细分标记进行细分，但不能正确划分刻度线。

任何帮助将不胜感激！

马特

来源

2013-05-22 mattjvincent

这拨弄解决你的大部分问题：http://jsfiddle.net/CtTkP/ 的说明如下：

我不知道你所说的超出图表区域是什么意思。如果标签是insdechart-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。

来源

2013-05-26 11:28:57

是的......我同意剪辑路径不会提供与坐标轴相同的功能，但它是最佳选择/解决方法。谢谢你解决......我知道我错过了一些东西！ – mattjvincent

超级解决方案。奇迹般有效。 –

的问题是，手动设置tickValues，而不是让X和Y比例为你做它。尝试发表评论：// .tickValues(tickValues)

var x = d3.scale.linear（）。rangeRound（[0，width]）。domain（d3.extent（tickValues））;

变种XAXIS = d3.svg.axis（） .scale（X）。东方（ “底部”） // .tickValues（tickValues） .tickFormat（函数（d）{ VAR RET = bpToChrMBP （d）; return ret.chr; }）;

显式设置tickValues的快捷方法可能是为每个轴定义一个clippingPath。

您也不需要make_x_axis函数（y轴相同）。看看这个可缩放的散点图例如：http://bl.ocks.org/ameliagreenhall/raw/d30a9ceb68f5b0fc903c/

为了防止平移左/右过去，你将不得不重新实现d3.behavior.zoom()的临界值。现在有一个称为mousemove的函数，调用translateTo并且此函数没有限制：

函数translateTo（p，l）l = point（l）; translate [0] + = p [0] - l [0]; translate [1] + = p [1] - l [1]; }
定义轴时，您可以尝试使用dx和dy属性进行播放。

来源

2013-05-24 08:54:41 nachocab

感谢您尝试的答案，但这不能回答或解决我的问题。我可以制作散点图并放大。这不是问题。问题是一旦放大就限制平移。 – mattjvincent

D3平移缩放溢出

回答

相关问题