Javascript d3 x轴太短，不适合散点图内容

我在D3散点图上的X轴宽度有问题-发生的是，我的X轴没有填充分配的空间，数据没有填充。请点击此处：

我已经定义了d3刻度的输出范围：

.range([padding, svgWidth - padding]);

散点图上点的输出范围与此完美吻合，但x轴没有-它停在显示点的范围之外-它完全按照我的指示执行，但是，随着svg的扩展，数据也填充了该空间，留下了一部分可见的数据，但不是放在轴的上下文中

---

谢谢你能提供的任何帮助

问题可能是您定义的域没有包含数据的完整范围。缩放域/范围用于映射数据值的范围，因此，如果域为[0,10]，范围为[0100]，则会得到范围0=0、范围1=10、范围2=20等值。。。范围10=100，取决于使用的刻度类型

因为它只是将域映射到范围，如果您给它一个它无法映射的值，那么您不太可能在范围的范围内获得值。如果设置范围11，则不会得到介于0和100之间的值。由于范围值是axis和plot可能用于构建实际svg的值，因此超出您的域的点最终将脱离您的plot或NaN或其他内容

尝试从数据本身派生域。D3具有min、max和extent函数，使您能够轻松实现这一点。如果有点对象数组，可以将访问器用作函数，以提供计算中使用的正确值

下面是一个例子：

var data =  [{x:1, y:1}, {x:2, y:4}, {x:3, y:2}, {x:4, y:1}, {x:5, y:2}];
var xExtent = d3.extent(data, function(d) { return d.x; });
var yExtent = d3.extent(data, function(d) { return d.y; });

请参阅JSFIDLE：

看看你的小提琴，它看起来像是在逻辑上有一个错误，你使用了错误的领域，为什么是实际绘制。如果您去掉了默认的最小值和最大值，它似乎可以纠正您描述的问题：

function makeScales(xAxisRepresents, domainMinOverride, domainMaxOverride) {
   var domainMin = d3.min(dataset, function datumToValueTransformer(datum) { return datum[xAxisRepresents]; });
   var domainMax = d3.max(dataset, function datumToValueTransformer(datum) { return datum[xAxisRepresents]; });

---

事实上，我意识到问题与我想象的有些不同。我所经历的是，超出我定义的输出范围的数据会显示出来，超出我的轴到达的位置。axis正在做我告诉它做的事情我的填充值比我想象的要高-我想解决的问题是如何让数据和axis输出宽度彼此对齐。我认为你已经正确地分析了这个问题，但它没有解决我正在处理的问题，因为那些有限的域是故意的；我试图找出如何最好地显示我的数据，而不让异常值导致刻度完全无法读取。但是，根据您的分析，我认为解决此问题的最佳方法是使用您的建议解决数据排列问题，并通过过滤初始数据集而不是简单地过滤域来解决异常值问题。我来看看是否有效！这通常是我处理它的方式，过滤数据。但是，您也可以创建剪辑路径来隐藏图表区域之外的所有内容。在本例中就是这样做的：。如果你检查dom，你会看到当你被缩放时，图表只是用一个剪辑来拉伸，以隐藏超出可见区域边缘的东西。