大佬教程收集整理的这篇文章主要介绍了javascript – D3 Pan Zoom Overflow，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望代码(虽然不是很好)直截了当.
我有一个总染色体长度总染色体长度的图表.蜱值是每个染色体的个体长度(总数).刻度被格式化为染色体的名称(对最终用户来说看起来不错).
我遇到的问题是：
> 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轴除了顶部和底部也一样).
>有没有办法将轴标签“中心”在刻度线之间.刻度线不均匀.我尝试使用细分为小刻度线,但是不会正确地细分刻度线.
任何帮助将不胜感激！
马特
>我不知道你的意思是延伸到图形区域之外.标签是否应该在图表区域内？如果你的意思是在平移,标签超出轴,可以通过使用两个更多的剪辑路径明智地解决问题,虽然这不允许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.
以上是大佬教程为你收集整理的javascript – D3 Pan Zoom Overflow全部内容，希望文章能够帮你解决javascript – D3 Pan Zoom Overflow所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。