Question

我已经在这里呆了几天了，我无法让这张图表遵守平移范围。最初，数据可能会被消极和积极地从页面上拉下来，但我已经能够通过关注this博客帖子来阻止这些数据。我会在这里粘贴我认为相关的代码，但该文件可以包含很长时间。

有问题的图表是由连续区域对象组成的高程图，这些对象根据其渐变进行着色。

有一条注释掉的线路就是那个给你带来麻烦的线路。我把问号放在了应该是最大限度的地方。出于某种原因，我无法找到数据区的最大界限。

这里是Plunkr

// 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];
}

唯一不容忽视的事情是，如果图表的最大值和结尾之间存在差距，则调整翻译值。该间隙的大小是投影的最大输入值与最大输出值之间的差值。然后从当前翻译值中减去间隙以将其关闭。

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

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

D3有界平移

1 个答案: