javascript - d3 x 轴对于散点图内容来说太短

Question

我在 D3 散点图上的 X 轴宽度方面遇到了问题 - 发生的情况是我的 x 轴没有填充分配的空间，而数据很乐意填充。 JSfiddle在这里:http://jsfiddle.net/u4cGJ/

我这样定义了 d3 秤的输出范围:

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

散点图上点的输出范围与此完全一致，但 x 轴却没有 - 它停止在显示的点范围之外， - 它完全按照我告诉它的方式执行，但是，当 svg 进一步延伸时，数据也会填充该空间，留下一部分可见的数据，但不会放置在轴的上下文中。

感谢您提供的任何帮助!

Answer 1

问题可能是您定义的域不包含数据的完整范围。比例域/范围用于映射数据值的范围，因此如果您的域是 [0,10] 并且范围是 [0,100]，您将得到类似 range(0) = 0、range(1) = 10 的值，范围(2) = 20...范围(10) = 100(取决于所使用的比例类型)。

由于它只是将域映射到范围，因此如果您给它一个它无法映射的值，则您不太可能获得范围范围内的值。例如。如果你执行 range(11) 你不会得到 0 到 100 之间的值。由于范围值是你的轴和绘图可能用来构建实际 svg 的值，所以落在你的域之外的点将结束关闭你的情节(或 NaN 或其他东西)。

尝试从数据本身派生域。 D3 具有最小、最大和范围函数，可以让您轻松完成此操作。如果您有一个点对象数组，则可以使用访问器作为函数来提供计算中使用的正确值。

这是一个例子:

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; });

参见 jsFiddle:http://jsfiddle.net/reblace/c9qw8/

看看你的 fiddle ，逻辑中似乎存在错误，你使用了错误的域来绘制实际绘制的内容。如果您摆脱默认的最小和最大内容，它似乎可以纠正您所描述的问题:

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