|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<svg width="960" height="500"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
width = +svg.attr("width"), |
|
height = +svg.attr("height"), |
|
transform = d3.zoomIdentity, |
|
n = 2000; |
|
|
|
var xScale = d3.scaleLinear().domain([0, n]).range([0, width]), |
|
yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]); |
|
var points = d3.range(n).map(cubicPairs); |
|
|
|
var g = svg.append("g"); |
|
|
|
g.selectAll("circle") |
|
.data(points) |
|
.enter().append("circle") |
|
.attr("cx", function(d) { return xScale(d.x); }) |
|
.attr("cy", function(d) { return yScale(d.y); }) |
|
.attr("r", 2.5) |
|
.call(d3.drag() |
|
.on("drag", dragged)); |
|
|
|
var zoomie = d3.zoom() |
|
.scaleExtent([1 / 2, 8]) |
|
.on("zoom", zoomed) |
|
|
|
svg.call(zoomie); |
|
|
|
|
|
function zoomed() { |
|
var tf = d3.event.transform; |
|
|
|
console.log("tf.x", tf.x, |
|
"xScale.invert(tf.x)", xScale.invert(tf.x), |
|
"cubic(xScale.invert(tf.x))", cubic(xScale.invert(tf.x)), |
|
"yScale(cubic(xScale.invert(tf.x)))", yScale(cubic(xScale.invert(tf.x)))) |
|
|
|
tf.y = yScale(cubic(xScale.invert(tf.x))); |
|
//console.log(tf) |
|
|
|
g.attr("transform", tf)//.transform.translateTo(tf.x, cubic(tf.x))); |
|
} |
|
|
|
function dragged(d) { |
|
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); |
|
} |
|
|
|
function cubic(i) { |
|
var a = 1.06e-7, b = -.0003, c = 0.2286, d = 0; |
|
return a*i**3 + b*i**2 + c*i + d; |
|
} |
|
|
|
function cubicPairs(x){ |
|
return { |
|
x: x, |
|
y: cubic(x) |
|
}; |
|
} |
|
|
|
</script> |