1

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

我已经定义了我的 d3 比例的输出范围：

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

并且散点图上点的输出范围与此完全一致，但 x 轴没有 - 它在显示的点范围内停止， - 它完全按照我告诉它做的事情，但是，作为svg 延伸得更远，数据也填充了该空间，留下了一部分可见的数据，但未放置在轴的上下文中。

谢谢你尽你所能的帮助！

4

1 回答 1

0

问题可能是您定义的域不包括数据的全部范围。比例域/范围用于映射数据值的范围，因此如果您的域是 [0,10] 并且您的范围是 [0,100]，您将获得像 range(0) = 0, range(1) = 10 这样的值, range(2) = 20... range(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/

看看你的小提琴，看起来你在实际绘制的内容中使用了错误的域的逻辑中存在错误。如果您摆脱了默认的 min 和 max 东西，它似乎可以纠正您所描述的问题：

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]; });
于 2013-09-11T18:13:03.610 回答