d3 x 轴对于散点图内容太短答案

【问题标题】：d3 x axis too short for scatterplot contentd3 x 轴对于散点图内容太短
【发布时间】：2013-09-11 16:45:23
【问题描述】：

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

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

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

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

感谢您提供的任何帮助！

【问题讨论】：

实际上，我已经意识到问题与我想象的有些不同。我遇到的是超出我定义的输出范围的数据显示，超出了我的轴到达的位置。轴完全按照我告诉它做的事情（我的填充值比我想象的要高） - 我要解决的问题是如何让数据和轴输出宽度相互对齐。

标签： javascript d3.js scatter-plot

【解决方案1】：

问题可能在于您定义的域不包括您的数据的全部范围。比例域/范围用于映射数据值的范围，因此如果您的域是 [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]; });

【讨论】：

我认为您已经正确分析了问题，但它并不能解决我正在处理的问题，因为这些有限域是故意的；我试图弄清楚如何最好地显示我的数据，而不会出现异常值导致比例完全不可读。但是，根据您的分析，我认为解决此问题的最佳方法是使用您的建议解决数据排列问题，并通过过滤初始数据集而不是简单的域来解决异常值问题。我会看看这是否有效！
这就是我通常的处理方式（过滤数据）。但是，您也可以创建一个剪辑路径来“隐藏”图表区域本身之外的所有内容。这就是本示例中所做的：bl.ocks.org/mbostock/1667367。如果您检查 dom，您会看到在缩放时，图表只是用剪辑拉伸以隐藏超出可见区域边缘的内容。