D3.js 如何允许d3js绘图在屏幕外运行

以Mike Bostocks为例，我创建了一个线条图来显示数据，并在下面绘制了一个图标图，以引起对图形中元素的注意。显示结果和相关代码的是：

[注：为了演示，我在这里为每个数据点添加了一个图像，生产中可能不是这样]

我的想法是，解决方案与获得正确的水平缩放有关，但我尝试了许多线性和顺序缩放和转换的变化，而不是更新基础数据，以使这项工作没有成功

我的问题是:

如何允许图形和图标从屏幕上消失

如何使图标彼此接触，而不是保持它们之间的间隙

我的代码不同之处在于我不想 删除屏幕外数据，因为我的用户将前后滚动

谢谢

编辑：

根据以下@LarsKotthoff建议，我将xScale的范围（）修改为：

var xScale = d3.scale.linear()
    .domain([0, data.length - 1])
    .range([0, (data.length - 1) * settings.iconWidth]);

这有双重效果：

不要将范围上限设置为屏幕，因为它将缩放到屏幕。将其设置为数据的长度。结果是，如果您拥有的数据超过svg宽度，它将自然地从svg边界的边缘流出

通过创建一个大小为其倍数的范围（即将范围乘以图标大小），将所有图标连接在一起

---

下面是

要使绘图延伸到SVG的边界之外，您需要做的就是调整正在使用的缩放范围。例如，您的x比例设置为

var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, settings.containerWidth - 16]);

该范围确定在SVG上绘制对象的位置，并且当前仅限于SVG的宽度。若要使其超出此范围，请将其更改为例如

var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, 2 * settings.containerWidth - 16]);

这将使x比例覆盖实际SVG宽度的两倍——也就是说，图形的一半是可见的，而另一半是“屏幕外的”

---

完成演示。

不确定“屏幕外”是什么意思。要在SVG的边界之外绘制，请相应地调整缩放范围，请参见@LarsKotthoff，就是这样。你是对的，我的意思是在SVG之外，我将使用剪辑路径来掩盖图形中的那些“屏幕外”部分。我还通过调整相同的范围来回答图标间距问题。我将为任何寻找最终代码的人更新问题。谢谢你的帮助。你能添加你的评论作为答案吗？我会将其标记为正确答案？

var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, 2 * settings.containerWidth - 16]);