Question

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

我已经定义了d3音阶的输出范围：

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

并且散点图上的点的输出范围完美地与此对齐，但x轴没有 - 它停止显示的点的范围， - 它正在完成我告诉它要做的事情，但是随着svg向外延伸，数据也会填充该空间，留下一段可见的数据，但不会放在轴的上下文中。

感谢您提供的任何帮助！

Answer 1

问题可能是您定义的域不包含数据的完整范围。比例域/范围用于映射数据值的范围，以便如果您的域为[0,10]且范围为[0,100]，您将获得范围（0）= 0，范围（1）= 10等值，范围（2）= 20 ...范围（10）= 100（取决于所使用的秤的种类）。

由于它只是将域映射到范围，如果你给它一个无法映射的值，你就不可能得到一个范围内的值。例如。如果你做范围（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/

看着你的小提琴，看起来逻辑上有一个错误，你正在使用错误的域来实际绘制的内容。如果你摆脱了默认的最小和最大值，它似乎纠正了你所描述的问题：

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

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

1 个答案: