D3 有界平移

Question

我已经在这个图表上呆了几天了，我无法让这个图表遵守平移边界。最初，数据可以从页面上拉出负面和正面，但我已经能够通过关注这篇博文来阻止负面数据。我将在此处粘贴我认为是相关代码的内容，但该文件很长，可以包含。

所讨论的图表是由根据其渐变着色的串联区域对象组成的高程图。

有一条注释掉的行是给麻烦的那条线。我用问号代替了应该是最大界限的东西。由于某种原因，我找不到数据区域的最大边界。

这是一个普伦克

尔

// Set up the size of the chart relative to the div
var x = d3.scale.linear().range([0, (width-80)]);
var y = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
// Define the look of the axis
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
var yAxisRight = d3.svg.axis().scale(y1).orient("left").ticks(5);
// Areas are segments of the chart filled with color
var area = d3.svg.area()
    .x(function(d) { return x(d.distance); })
    .y0(height)
    .y1(function(d) { return y(d.elevation); });
// Functions for handling zoom events
var gradientZoomListener = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", gradientZoomHandler);
function gradientZoomHandler() {    
    var t = gradientZoomListener.translate(),
      tx = t[0],
      ty = t[1];
    tx = Math.min(tx, 0);
//  tx = Math.max(tx, ??);
    gradientZoomListener.translate([tx,ty])
    gradientChart.select(".x.axis").call(xAxis);
    gradientChart.select(".y.axis").call(yAxis);  
    gradientChart.selectAll('.area').attr('d', area);    
}

Answer 1

在这种情况下，最直观的方法是检查比例将输入域的边界映射到什么，而不是检查像素值。这个想法是，域的下限应映射到 0（输出范围的下限）或更小，上限应映射到输出范围的上限或更大。

如果下限映射到小于 0，则该值位于图形的左侧，即显示的最低值大于边界。如果大于 0，则 y 轴和第一个值之间必须有间隙。同样，对于上限，如果它映射到小于输出范围的上限，则它与图形末尾之间必须存在间隙。

在代码中，这如下所示。

if(x(xExtent[0]) > 0) {
      tx = 0;
} else if(x(xExtent[1]) < x.range()[1]) {
      tx -= x(xExtent[1]) - x.range()[1];
}

唯一不平凡的事情是，如果最大值和图形末尾之间存在间隙，则调整平移值。此差距的大小是最大输入值的预测值与最大输出值之间的差值。然后从当前转换值中减去差距以缩小它。

此处提供完整示例。请注意，我已经移动了一些代码来访问只有在读取数据时才知道的值。

它对 y 轴的工作方式相同。