D3.js 如果要缩放，要为缩放和平移计算哪些变换值

我正在看这个例子，它展示了如何使用缩放功能在指定的域范围内进行缩放

我对这部分感到困惑：

var d0 = new Date(2003, 0, 1),
    d1 = new Date(2004, 0, 1);

// Gratuitous intro zoom!
svg.call(zoom).transition()
      .duration(1500)
      .call(zoom.transform, d3.zoomIdentity
          .scale(width / (x(d1) - x(d0))) // I think this is to caulcuate k which is the zoom factor
          .translate(-x(d0), 0)); // but what is this?

我很难理解所做的计算。如果我的假设是错误的，请纠正我

d3.zoomIdentity这是一个在应用时不执行任何操作的转换

.scalewidth/xd1-xd0这是通过计算两个数据点d0和d1之间的宽度和像素差之间的比率来计算要应用的比例

---

.translate-xd0，0我不懂这部分。为什么xd0被否定？d0的x坐标与需要应用的平移量有何关系

平移值正在对齐图形，以便xd0是绘图区域中可见的最左边的x值。这确保绘图区域的可见部分从d0延伸到d1，并延伸到可见子域。如果x标度的完整域的最小值为0，那么x0将左移负移xd0像素

我将使用一个片段来演示：

var svg=d3.selectsvg， 边距={顶部：10，右侧：50，底部：70，左侧：200}， 宽度=+svg.attrwidth-margin.left-margin.right， 高度=+svg.attrheight-margin.top-margin.bottom； //数据比例： var x=d3.scaleLinear .范围[0，宽度] .域[0,20]； //缩放比例： var xZoom=d3.scaleLinear .范围[0，宽度] .域[0，宽度]； var xAxis=d3.x.5； var xZoomAxis=d3.axisBottomxZoom； var zoom=d3.zoom .scaleExtent[1,32] .translateExtent[[0,0]，[width，height]] .范围[[0,0]，[宽度，高度]] .onzoom，缩放； var g=svg.appendg .attransform，translate+margin.left+，+margin.top+； //地块面积 g、 附属物 .宽度，宽度 .身高，身高 .attrfill，urlstrips； g、 附录文本 .attrx，宽度/2 .属性，高度/2 .styletext定位符，中间 .textplot面积； g、 附属品 .属性1,0 .attry2，高度 .笔划宽度，1 .黑色； //缩放的绘图区域： var rect=g.appendrect .宽度，宽度 .身高，身高 .浅灰色 .不透明度，0.4； //绘图轴： g、 附加 .attrclass，轴-x .attrtransform，translate0，+高度+ .callxAxis； //缩放轴： g、 附加 .attrclass，轴-缩放-x .attrtransform，translate0，+高度+30+ .callxZoomAxis； var text=g.appendtext .属性，高度+60 .attr文本锚定，中间 .textzoom单位 .attrx，宽度/2； //免费介绍缩放： var d1=18； var d0=8； svg.callzoom.transition .期限2000 .callzoom.transform，d3.zoomIdentity .scalewidth/xd1-xd0 .translate-xd0，0； 函数放大{ var t=d3.event.transform，xt=t.rescaleXx； xZoom.range[xt0，xt20]； g、 选择.axis-x.callxAxis.scalext； g、 选择.axis-zoom-x.callxZoomAxis.scalexZoom； rect.attrx，xt0； rect.attrwidth，xt20-xt0； text.attrx，xt10； }

---

@RobertHarvey我确实看到了，但我不理解给定上下文中的计算。例如，为什么xd0被否定？也许你可以让你的问题更具体一些？这很好地解释了它！非常感谢。