How do you allow d3js plot to run off screen - d3.js

Question

Using Mike Bostocks example of Path Transitions I have created a line graph to show data with an accompanying plot of icons underneath to call attention to elements in the graph. Here is a JSFiddle showing the result and the relevant code is:
[note: for demonstration I'm appending an image with every data point here, this may not be the case in production]
var data = [
{ "id": 0, "elevation": 90 },
{ "id": 1, "elevation": 73 },
{ "id": 2, "elevation": 70 },
{ "id": 3, "elevation": 59 },
{ "id": 4, "elevation": 63 },
{ "id": 5, "elevation": 65 },
{ "id": 6, "elevation": 61 },
{ "id": 7, "elevation": 59 },
{ "id": 8, "elevation": 60 },
{ "id": 9, "elevation": 62 },
{ "id": 10, "elevation": 64 }
];
var key = function (d) {
return d.id;
};
var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, settings.containerWidth - 16]);
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.elevation; })])
.range([settings.containerHeight, 0]);
var svg = d3.select("#animation-container")
.append("svg")
.attr("width", settings.containerWidth)
.attr("height", settings.containerHeight);
var line = d3.svg.line()
.x(function(d, i) { return xScale(i); })
.y(function(d) { return yScale(d.elevation); })
.interpolate("basis");
svg.append("g")
.append("path")
.datum(data, key)
.attr("class", "line")
.attr("d", line);
svg.append("g")
.selectAll(".data-points")
.data(data, key)
.enter()
.append('image')
.attr("x", function (d, i) { return xScale(i); })
.attr("y", settings.iconLine)
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("width", settings.iconWidth)
.attr("height", settings.iconHeight);
My thinking is that the solutions is be related to getting the horizontal scaling correct but I have tried many variations of linear and ordinal scales and transitions vs updating base data to make this work without success.
My question is:
How do I allow both the graph and icons to run off screen?
How do I keep the icons touching each other rather than gaps between them
Where my code differs from Mikes excellent example is that I don't want to
remove the offscreen data as my user will scroll back and forth.
Thanks.
EDIT:
As per #LarsKotthoff suggestion below I amended the range() of the xScale to the following:
var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, (data.length - 1) * settings.iconWidth]);
This has a double effect:
Don't set the upper bound of the range to the screen as it will scale to the screen. Set it to the length of data. The result is if you have more data than svg width it will run off the edge of the svg boundary naturally.
Have all your icons joined together by creating a range that is a multiple of their sizes i.e. multiplying the range by the icon size.
Here's is the updated JSFiddle

Answer 1

To make a plot extend beyond the border of the SVG, all you need to do is adjust the range of the scales you're using. For example, your x scale is set up as
var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, settings.containerWidth - 16]);
The range determines where things are drawn on the SVG and is currently restricted to the width of the SVG. To make it extend beyond that, change it to e.g.
var xScale = d3.scale.linear()
.domain([0, data.length - 1])
.range([0, 2 * settings.containerWidth - 16]);
which would make the x scale cover twice the width of the actual SVG -- that is, half of the graph would be visible, while the other half would be "off screen".
Complete demo here.

Answer 2

Note d3.scale.linear is from v3. It changed to d3.scaleLinear in v4:
'scale' and 'svg' does not exist in "node_modules/#types/d3/index"