Javascript D3：是否可以缩放并平移一个轴，而只平移另一个轴？

我对x轴进行了缩放和平移，但我想为y轴添加平移。我尝试使用d3.behavior.zoom和d3.event.translate[1]来获取y平移值并使用该值，但在缩放时平移值会发生变化，因此在单击拖动时平移y轴，缩放也会以非直观的方式平移y轴

我还尝试使用两个d3.behavior.zoom实例，一个用于x轴，一个用于y轴，但只有最后添加的一个实例在缩放事件中被调用

下面是一个在x方向进行缩放和平移的示例，我也想添加y平移，但不添加y缩放：

var x=d3.scale.linear .domain[0800] .范围[0800]； 变量y=d3.scale.linear .domain[0800] .范围[0800]； var rectangleSelector=d3。选择“svg” .附加“g” .选择All'rect' .数据[[0,0]，[50,50]，[100100]] 进来 .append'rect' .attr'fill'，'black' .attr'x'，d=>xd[0] .attr'y'，d=>yd[1] .attr'width'，d=>xd[0]+40-xd[0] .attr'height'，d=>y40； d3.选择“svg” .calld3.behavior.zoom.xx.on'zoom'，=>{ 矩形选择器 .attr'x'，d=>xd[0] .attr'y'，d=>yd[1] .attr'width'，d=>xd[0]+40-xd[0] .attr'height'，d=>y40； };

---

我想出了一种方法，但感觉像是一个巨大的黑客：

var lastY = 0;

var zoom = d3.behavior.zoom().x(x);

zoom.on('zoom', () => {
  var translateY;

  if (d3.event.sourceEvent.type === 'mousemove') {
    // if it's a drag event then use the value from the drag
    translateY = d3.event.translate[1];
    lastY = translateY;
  } else {
    // if it's a wheel event then set the y translation to the last value
    translateY = lastY;
    zoom.translate([d3.event.translate[0], translateY]);
  }

  // translateY can now be used here as an offset to any drawing like so:
  rectangleSelector.attr('y', y(d[1] + translateY));
});

你可以用 zoom.center JSFIDDLE：

首先，缩放行为处理x轴的平移和缩放，这由

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

所以我们将使用缩放来处理x轴的东西

对于Y轴，要获得平移行为

创建一个单独的拖动行为，用于捕获dy、移动y域并重新应用它

添加拖动行为

var drag = d3.behavior.drag()
     .on("drag", dragging)

让y比例的域是可变的，我们将在拖动时修改它

var yPan = 0;
var yMin = (-height / 2);
var yMax = (height / 2);

var y = d3.scale.linear()
    .domain([yMin, yMax])
    .range([height, 0]);

添加用于在拖动事件上重新缩放Y轴的函数

function dragging(d) {
   yPan = d3.event.dy;
   yMin += yPan;
   yMax += yPan;
   y.domain([yMin, yMax])
   d3.select(".y.axis").call(yAxis)};

从SVG元素调用拖动函数

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
       .call(zoom)
       .call(drag);

---

D3v6提供对独立缩放轴的本机访问：

d3.behavior.zoom可与x和y链接；我只指定x，因此缩放行为只会更改x轴。但它仍然报告y轴的平移值，我想用它来平移该轴问题是它们受到缩放的影响，不仅仅是平移。我也在制作一个JSFIDLE。可能是这样：@altocumulus看起来很有希望，但是那里有多个d3.behavior.zoom实例，它们都绑定到屏幕的特定区域——我在屏幕的同一区域尝试了两个实例，只有最后一个实例应用了接收到的事件，尽管可能是两个g具有相同尺寸的元素可以每个接收一个？@altocumulus，因此我尝试创建两个矩形元素，每个元素的大小与画布的大小相同，使它们填充：白色，填充不透明度：0，因此它们是透明的，并在每个元素上附加缩放行为，即使是指针事件：只有最后添加的d3.behavior.zoom才会触发事件。有时，当我尝试此代码段时，初始缩放仍会更改垂直轴，具体取决于您将初始中心设置为什么。您可以尝试将Y轴上的初始缩放更改为50，在您的情况下，这是初始Y轴的中间。您可以更新d3 v4的代码吗？d3.behavior.zoom.x。。。不再有效