D3 Drag-to-Scale X-Axis

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="graph"></div>
<div>Color Scheme: <a href="http://colorschemedesigner.com/#3q61Uw0w0w0w0">http://colorschemedesigner.com/#3q61Uw0w0w0w0</a>

</div>

CSS

@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: local('Oxygen'), local('Oxygen-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff) format('woff');
}
@font-face {
    font-family:'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
svg {
    border: 1px solid #999;
}
.axis text {
    cursor: ew-resize;
    font-family: Oxygen;
    font-size: 10px;
}
.axis line, .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.node {
    stroke-width: 1.5px;
}
.node.target {
    fill: #FFBC73;
    stroke: #FFA340;
}
.node.source {
    fill: #62B1D0;
    stroke: #0776A0;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
}

JavaScript

var lineColor = "#172CAF";
var circleOutlineColor = "#0776A0";
var circleFillColor = "#62B1D0";
var textColorSource = "#FFFFFF";

var circleOutlineColorTarget = "#FFA340";
var circleFillColorTarget = "#FFBC73";
var textColorTarget = "#A65600";

mapNodes = function (nodes) {
    var nodesMap;
    nodesMap = d3.map();
    nodes.forEach(function (n) {
        return nodesMap.set(n.id, n);
    });
    return nodesMap;
};

var nodes = [{
    id: "T0",
    name: "Target 0",
    type: "t",
    time: 0,
    strength: 1
}, {
    id: "T1",
    name: "Target 1",
    type: "t",
    time: 3,
    strength: 10
}, {
    id: "T2",
    name: "Target 2",
    type: "t",
    time: 5,
    strength: 2
}, {
    id: "T3",
    name: "Target 3",
    type: "t",
    time: 8,
    strength: 7
}, {
    id: "T4",
    name: "Target 4",
    type: "t",
    time: 6,
    strength: 7
}];

nodesMap = mapNodes(nodes);

var margin = {
    top: 20,
    right: 10,
    bottom: 20,
    left: 10
},
padding = {
    top: 60,
    right: 60,
    bottom: 60,
    left: 60
},
outerWidth = 500,
    outerHeight = 400,
    innerWidth = outerWidth - margin.left - margin.right,
    innerHeight = outerHeight - margin.top - margin.bottom,
    width = innerWidth - padding.left - padding.right,
    height = innerHeight - padding.top - padding.bottom,
    axisBand = 15;

var x = d3.scale.linear()
    .domain([0, 10])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 100])
    .range([0, height]);

var target_axis_position = y(50);

var force = d3.layout.force()
    .charge(-240)
    .gravity(0.2)
    .linkStrength(function (l, i) {
    return l.strength;
})
    .size([width, height]);

var svg = d3.select("div.graph").append("svg")
    .attr("width", outerWidth)
    .attr("height", outerHeight)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

force.nodes(nodes)
  ...