| license: none |
Built with blockbuilder.org
d3 V4 extension to X-Value mouseover found here.
Achieved by accessing zoom transform properties x, y and k in mousemove() and zoomed() function.
Happy to offer assistance in reproductions, tweet me at @LynchThomas
forked from twlynch's block: X-Value Mouseover with Pan & Zoom
| dt | price | |
|---|---|---|
| 29/05/2016 00:00 | 529.5389047 | |
| 29/05/2016 00:15 | 527.5588802 | |
| 29/05/2016 00:30 | 524.778649 | |
| 29/05/2016 00:45 | 523.2958823 | |
| 29/05/2016 01:00 | 523.4245659 | |
| 29/05/2016 01:15 | 524.4627037 | |
| 29/05/2016 01:30 | 527.9041225 | |
| 29/05/2016 01:45 | 529.4042726 | |
| 29/05/2016 02:00 | 531.7883293 | |
| 29/05/2016 02:15 | 528.9821571 | |
| 29/05/2016 02:30 | 531.8800509 | |
| 29/05/2016 02:45 | 530.8204334 | |
| 29/05/2016 03:00 | 527.6374539 | |
| 29/05/2016 03:15 | 528.0533021 | |
| 29/05/2016 03:30 | 527.118013 | |
| 29/05/2016 03:45 | 531.6117305 | |
| 29/05/2016 04:00 | 534.3326951 | |
| 29/05/2016 04:15 | 533.9387235 | |
| 29/05/2016 04:30 | 531.4396142 | |
| 29/05/2016 04:45 | 528.8642298 | |
| 29/05/2016 05:00 | 531.722203 | |
| 29/05/2016 05:15 | 529.9992645 | |
| 29/05/2016 05:30 | 529.5556164 | |
| 29/05/2016 05:45 | 530.8012955 | |
| 29/05/2016 06:00 | 534.1582467 | |
| 29/05/2016 06:15 | 531.5518665 | |
| 29/05/2016 06:30 | 532.1871656 | |
| 29/05/2016 06:45 | 532.3282584 | |
| 29/05/2016 07:00 | 529.7790915 | |
| 29/05/2016 07:15 | 526.8690928 | |
| 29/05/2016 07:30 | 524.6285684 | |
| 29/05/2016 07:45 | 522.983496 | |
| 29/05/2016 08:00 | 523.4607828 | |
| 29/05/2016 08:15 | 522.4288209 | |
| 29/05/2016 08:30 | 522.228843 | |
| 29/05/2016 08:45 | 524.6277197 | |
| 29/05/2016 09:00 | 522.151199 | |
| 29/05/2016 09:15 | 522.6803508 | |
| 29/05/2016 09:30 | 525.2135589 | |
| 29/05/2016 09:45 | 526.3242766 | |
| 29/05/2016 10:00 | 521.6435571 | |
| 29/05/2016 10:15 | 520.9708598 | |
| 29/05/2016 10:30 | 520.2197563 | |
| 29/05/2016 10:45 | 520.8286925 | |
| 29/05/2016 11:00 | 519.1821379 | |
| 29/05/2016 11:15 | 520.3896485 | |
| 29/05/2016 11:30 | 522.819018 | |
| 29/05/2016 11:45 | 521.1327638 | |
| 29/05/2016 12:00 | 523.1243534 | |
| 29/05/2016 12:15 | 526.3183889 | |
| 29/05/2016 12:30 | 528.2727566 | |
| 29/05/2016 12:45 | 528.6504385 | |
| 29/05/2016 13:00 | 527.1448216 | |
| 29/05/2016 13:15 | 526.975057 | |
| 29/05/2016 13:30 | 524.9293366 | |
| 29/05/2016 13:45 | 528.130332 | |
| 29/05/2016 14:00 | 526.87321 | |
| 29/05/2016 14:15 | 528.9517776 | |
| 29/05/2016 14:30 | 528.7978342 | |
| 29/05/2016 14:45 | 530.6942574 | |
| 29/05/2016 15:00 | 532.4666049 | |
| 29/05/2016 15:15 | 533.1065342 | |
| 29/05/2016 15:30 | 533.4338 | |
| 29/05/2016 15:45 | 534.5889181 | |
| 29/05/2016 16:00 | 532.0885295 | |
| 29/05/2016 16:15 | 530.738012 | |
| 29/05/2016 16:30 | 528.4786901 | |
| 29/05/2016 16:45 | 531.371595 | |
| 29/05/2016 17:00 | 531.5801234 | |
| 29/05/2016 17:15 | 533.4482674 | |
| 29/05/2016 17:30 | 535.1864591 | |
| 29/05/2016 17:45 | 532.0032708 | |
| 29/05/2016 18:00 | 533.5419303 | |
| 29/05/2016 18:15 | 536.1544703 | |
| 29/05/2016 18:30 | 538.1812494 | |
| 29/05/2016 18:45 | 542.6845332 | |
| 29/05/2016 19:00 | 544.2645532 | |
| 29/05/2016 19:15 | 541.8886483 | |
| 29/05/2016 19:30 | 542.8574868 | |
| 29/05/2016 19:45 | 547.2709411 | |
| 29/05/2016 20:00 | 546.8532287 | |
| 29/05/2016 20:15 | 547.5187238 | |
| 29/05/2016 20:30 | 550.0686207 | |
| 29/05/2016 20:45 | 549.5900027 | |
| 29/05/2016 21:00 | 548.9099088 | |
| 29/05/2016 21:15 | 549.201577 | |
| 29/05/2016 21:30 | 550.9274143 | |
| 29/05/2016 21:45 | 551.5686587 | |
| 29/05/2016 22:00 | 549.6782338 | |
| 29/05/2016 22:15 | 549.9946916 | |
| 29/05/2016 22:30 | 547.961721 | |
| 29/05/2016 22:45 | 548.68068 | |
| 29/05/2016 23:00 | 551.0298729 | |
| 29/05/2016 23:15 | 555.8607307 | |
| 29/05/2016 23:30 | 556.7467247 | |
| 29/05/2016 23:45 | 557.1482762 | |
| 30/05/2016 00:00 | 555.1188481 | |
| 30/05/2016 00:15 | 553.2834776 | |
| 30/05/2016 00:30 | 551.7969474 | |
| 30/05/2016 00:45 | 553.4107394 | |
| 30/05/2016 01:00 | 552.9719455 | |
| 30/05/2016 01:15 | 555.1907765 | |
| 30/05/2016 01:30 | 552.9392159 | |
| 30/05/2016 01:45 | 556.1415515 | |
| 30/05/2016 02:00 | 551.3208113 | |
| 30/05/2016 02:15 | 555.6778853 | |
| 30/05/2016 02:30 | 558.9293734 | |
| 30/05/2016 02:45 | 559.9938367 | |
| 30/05/2016 03:00 | 559.0903515 | |
| 30/05/2016 03:15 | 562.6599091 | |
| 30/05/2016 03:30 | 564.284598 | |
| 30/05/2016 03:45 | 560.8398195 | |
| 30/05/2016 04:00 | 563.6686439 | |
| 30/05/2016 04:15 | 561.4345947 | |
| 30/05/2016 04:30 | 559.0118588 | |
| 30/05/2016 04:45 | 561.4771546 | |
| 30/05/2016 05:00 | 560.8053913 | |
| 30/05/2016 05:15 | 556.7005345 | |
| 30/05/2016 05:30 | 554.22468 | |
| 30/05/2016 05:45 | 550.7212416 | |
| 30/05/2016 06:00 | 553.774174 | |
| 30/05/2016 06:15 | 555.7583899 | |
| 30/05/2016 06:30 | 557.0187632 | |
| 30/05/2016 06:45 | 554.6857896 | |
| 30/05/2016 07:00 | 554.4765331 | |
| 30/05/2016 07:15 | 552.5757717 | |
| 30/05/2016 07:30 | 555.2563676 | |
| 30/05/2016 07:45 | 553.5450762 | |
| 30/05/2016 08:00 | 551.2569376 | |
| 30/05/2016 08:15 | 551.7263233 | |
| 30/05/2016 08:30 | 548.9351753 | |
| 30/05/2016 08:45 | 546.1492609 | |
| 30/05/2016 09:00 | 545.516713 | |
| 30/05/2016 09:15 | 546.7990486 | |
| 30/05/2016 09:30 | 544.7450563 | |
| 30/05/2016 09:45 | 542.0217215 | |
| 30/05/2016 10:00 | 542.0258711 | |
| 30/05/2016 10:15 | 545.6676747 | |
| 30/05/2016 10:30 | 548.9624457 | |
| 30/05/2016 10:45 | 547.921157 | |
| 30/05/2016 11:00 | 550.6783721 | |
| 30/05/2016 11:15 | 552.0014279 | |
| 30/05/2016 11:30 | 554.0288217 | |
| 30/05/2016 11:45 | 552.1263134 | |
| 30/05/2016 12:00 | 549.550576 | |
| 30/05/2016 12:15 | 547.8079265 | |
| 30/05/2016 12:30 | 551.3026201 | |
| 30/05/2016 12:45 | 549.9550233 | |
| 30/05/2016 13:00 | 553.4813578 | |
| 30/05/2016 13:15 | 556.5084731 | |
| 30/05/2016 13:30 | 554.0244103 | |
| 30/05/2016 13:45 | 555.3126946 | |
| 30/05/2016 14:00 | 558.133824 | |
| 30/05/2016 14:15 | 557.6626154 | |
| 30/05/2016 14:30 | 559.7515283 | |
| 30/05/2016 14:45 | 560.4347443 | |
| 30/05/2016 15:00 | 558.6436797 | |
| 30/05/2016 15:15 | 555.00754 | |
| 30/05/2016 15:30 | 553.4700457 | |
| 30/05/2016 15:45 | 552.3512078 | |
| 30/05/2016 16:00 | 554.7501108 | |
| 30/05/2016 16:15 | 553.7217279 | |
| 30/05/2016 16:30 | 551.8896247 | |
| 30/05/2016 16:45 | 551.1123782 | |
| 30/05/2016 17:00 | 551.7316701 | |
| 30/05/2016 17:15 | 549.8934832 | |
| 30/05/2016 17:30 | 552.0212273 | |
| 30/05/2016 17:45 | 552.8600891 | |
| 30/05/2016 18:00 | 549.8054227 | |
| 30/05/2016 18:15 | 546.3426347 | |
| 30/05/2016 18:30 | 547.60672 | |
| 30/05/2016 18:45 | 550.5353637 | |
| 30/05/2016 19:00 | 553.2863966 | |
| 30/05/2016 19:15 | 553.1217521 | |
| 30/05/2016 19:30 | 550.4687461 | |
| 30/05/2016 19:45 | 547.0925256 | |
| 30/05/2016 20:00 | 546.301695 | |
| 30/05/2016 20:15 | 547.6573104 | |
| 30/05/2016 20:30 | 544.5921177 | |
| 30/05/2016 20:45 | 543.9434068 | |
| 30/05/2016 21:00 | 541.0384972 | |
| 30/05/2016 21:15 | 538.1421637 | |
| 30/05/2016 21:30 | 536.9005986 | |
| 30/05/2016 21:45 | 534.7886518 | |
| 30/05/2016 22:00 | 535.0202763 | |
| 30/05/2016 22:15 | 532.2809759 | |
| 30/05/2016 22:30 | 528.0531663 | |
| 30/05/2016 22:45 | 526.3701666 | |
| 30/05/2016 23:00 | 526.5788652 | |
| 30/05/2016 23:15 | 528.2669507 | |
| 30/05/2016 23:30 | 527.1251248 | |
| 30/05/2016 23:45 | 527.6744231 | |
| 31/05/2016 00:00 | 529.9578297 | |
| 31/05/2016 00:15 | 525.098693 | |
| 31/05/2016 00:30 | 521.7736734 | |
| 31/05/2016 00:45 | 524.4043804 | |
| 31/05/2016 01:00 | 527.0927773 | |
| 31/05/2016 01:15 | 528.8743209 | |
| 31/05/2016 01:30 | 527.2106303 | |
| 31/05/2016 01:45 | 525.8356119 | |
| 31/05/2016 02:00 | 524.993027 | |
| 31/05/2016 02:15 | 525.138921 | |
| 31/05/2016 02:30 | 523.7436488 | |
| 31/05/2016 02:45 | 525.8006303 | |
| 31/05/2016 03:00 | 529.2518516 | |
| 31/05/2016 03:15 | 528.4364819 | |
| 31/05/2016 03:30 | 530.3766922 | |
| 31/05/2016 03:45 | 531.4836497 | |
| 31/05/2016 04:00 | 535.0405551 | |
| 31/05/2016 04:15 | 532.422054 | |
| 31/05/2016 04:30 | 535.5472296 | |
| 31/05/2016 04:45 | 536.8424257 | |
| 31/05/2016 05:00 | 535.6866766 | |
| 31/05/2016 05:15 | 535.177933 | |
| 31/05/2016 05:30 | 531.8587348 | |
| 31/05/2016 05:45 | 534.5500416 | |
| 31/05/2016 06:00 | 536.7487642 | |
| 31/05/2016 06:15 | 534.5047597 | |
| 31/05/2016 06:30 | 537.7434472 | |
| 31/05/2016 06:45 | 536.2103297 | |
| 31/05/2016 07:00 | 534.3003777 | |
| 31/05/2016 07:15 | 537.2720731 | |
| 31/05/2016 07:30 | 536.4135723 | |
| 31/05/2016 07:45 | 533.7651508 | |
| 31/05/2016 08:00 | 537.4191071 | |
| 31/05/2016 08:15 | 537.808962 | |
| 31/05/2016 08:30 | 535.7542768 | |
| 31/05/2016 08:45 | 532.9270735 | |
| 31/05/2016 09:00 | 536.4425885 | |
| 31/05/2016 09:15 | 532.7507978 | |
| 31/05/2016 09:30 | 532.5963515 | |
| 31/05/2016 09:45 | 533.039164 | |
| 31/05/2016 10:00 | 531.4206721 | |
| 31/05/2016 10:15 | 531.5716131 | |
| 31/05/2016 10:30 | 532.2914666 | |
| 31/05/2016 10:45 | 530.9618008 | |
| 31/05/2016 11:00 | 531.3485077 | |
| 31/05/2016 11:15 | 530.9806809 | |
| 31/05/2016 11:30 | 527.9485916 | |
| 31/05/2016 11:45 | 527.6692165 | |
| 31/05/2016 12:00 | 526.6906502 | |
| 31/05/2016 12:15 | 524.344453 | |
| 31/05/2016 12:30 | 526.2037258 | |
| 31/05/2016 12:45 | 525.037854 | |
| 31/05/2016 13:00 | 522.4634028 | |
| 31/05/2016 13:15 | 521.0588879 | |
| 31/05/2016 13:30 | 517.6757116 | |
| 31/05/2016 13:45 | 516.6201641 | |
| 31/05/2016 14:00 | 515.969519 | |
| 31/05/2016 14:15 | 513.904086 | |
| 31/05/2016 14:30 | 514.0692942 | |
| 31/05/2016 14:45 | 512.5225675 | |
| 31/05/2016 15:00 | 510.8977313 | |
| 31/05/2016 15:15 | 512.2503649 | |
| 31/05/2016 15:30 | 512.5022097 | |
| 31/05/2016 15:45 | 514.5306554 | |
| 31/05/2016 16:00 | 513.7919976 | |
| 31/05/2016 16:15 | 513.0118415 | |
| 31/05/2016 16:30 | 513.4901886 | |
| 31/05/2016 16:45 | 511.3693831 | |
| 31/05/2016 17:00 | 512.4725371 | |
| 31/05/2016 17:15 | 507.8084046 | |
| 31/05/2016 17:30 | 510.8952002 | |
| 31/05/2016 17:45 | 510.7606956 | |
| 31/05/2016 18:00 | 514.1781921 | |
| 31/05/2016 18:15 | 512.9852145 | |
| 31/05/2016 18:30 | 512.4264463 | |
| 31/05/2016 18:45 | 512.0923973 | |
| 31/05/2016 19:00 | 513.2666606 | |
| 31/05/2016 19:15 | 510.9043901 | |
| 31/05/2016 19:30 | 513.7661189 | |
| 31/05/2016 19:45 | 510.3100905 | |
| 31/05/2016 20:00 | 510.5742457 | |
| 31/05/2016 20:15 | 512.5068497 | |
| 31/05/2016 20:30 | 516.0893132 | |
| 31/05/2016 20:45 | 513.4419914 | |
| 31/05/2016 21:00 | 512.1981996 | |
| 31/05/2016 21:15 | 511.6079079 | |
| 31/05/2016 21:30 | 515.2135677 | |
| 31/05/2016 21:45 | 513.0531418 | |
| 31/05/2016 22:00 | 516.6751815 | |
| 31/05/2016 22:15 | 517.6381912 | |
| 31/05/2016 22:30 | 516.081836 | |
| 31/05/2016 22:45 | 517.5857142 | |
| 31/05/2016 23:00 | 516.7094712 | |
| 31/05/2016 23:15 | 519.2442451 | |
| 31/05/2016 23:30 | 519.5219463 | |
| 31/05/2016 23:45 | 521.9278797 | |
| 01/06/2016 00:00 | 523.6351892 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <div id="chart"></div> | |
| <style> | |
| body { | |
| font: 10px Arial; | |
| } | |
| .view { | |
| fill: rgba(255, 255, 255, 0.2); | |
| } | |
| .axis path { | |
| display: none; | |
| } | |
| .axis line { | |
| stroke-opacity: 0.3; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| button { | |
| position: absolute; | |
| top: 20px; | |
| left: 80px; | |
| } | |
| </style> | |
| <body> | |
| <button>Reset</button> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 50, left: 50}, | |
| width = 1000 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var parseTime = d3.timeParse("%d/%m/%Y %H:%M"); | |
| bisectDate = d3.bisector(function(d) { return d.dt; }).left; | |
| formatValue = d3.format(",.2f"), | |
| formatCurrency = function(d) { return "£" + formatValue(d); }; | |
| var x = d3.scaleTime() | |
| .range([0, width]); | |
| var y = d3.scaleLinear() | |
| .range([height, 0]); | |
| var priceSeries = d3.line() | |
| .defined(function(d) { return d.price != 0; }) | |
| .x(function(d) { return x(d.dt); }) | |
| .y(function(d) { return y(d.price); }); | |
| svg = d3.select('#chart') | |
| .append("svg:svg") | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append("svg:g") | |
| .attr("id","group") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var focus = svg.append("g") | |
| .style("display", "none") | |
| // Get the data | |
| d3.csv("data.csv", function(error, data) { | |
| if (error) throw error; | |
| // format the data | |
| data.forEach(function(d,i) { | |
| d.dt = parseTime(d.dt); | |
| d.price = +d.price; | |
| }); | |
| // Scale the range of the data | |
| console.log("Date range: ", d3.extent(data, function(d) { return d.dt; })); | |
| console.log("Price range: ", d3.extent(data, function(d) { return +d.price; })); | |
| x.domain(d3.extent(data, function(d) { return d.dt; })); | |
| y.domain(d3.extent(data, function(d) { return d.price; })); | |
| var zoom = d3.zoom() | |
| .scaleExtent([0.75, 15000]) | |
| .translateExtent([[-100000, -100000], [100000, 100000]]) | |
| .on("zoom", zoomed); | |
| var xAxis = d3.axisBottom(x) | |
| .ticks((width + 2) / (height + 2) * 5) | |
| .tickSize(-height) | |
| .tickPadding(10); | |
| var yAxis = d3.axisRight(y) | |
| .ticks(5) | |
| .tickSize(width) | |
| .tickPadding(- 20 - width); | |
| svg.append("text") | |
| .attr("transform", | |
| "translate(" + (width/2) + " ," + (height + margin.top + 20) + ")") | |
| .style("font-size","12px") | |
| .style("font-family", "sans-serif") | |
| .style("text-anchor", "middle") | |
| .text("Date/Time"); | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 0 - margin.left/1.2) | |
| .attr("x",0 - (height / 2)) | |
| .attr("dy", "1em") | |
| .style("font-size","12px") | |
| .style("text-anchor", "middle") | |
| .text("Price"); | |
| var view = svg.append("rect") | |
| .attr("class", "view") | |
| .attr("x", 0.5) | |
| .attr("y", 0.5) | |
| .attr("width", width - 1) | |
| .attr("height", height - 1); | |
| var gX = svg.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| var gY = svg.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(yAxis); | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var chartBody = svg.append("g") | |
| .attr("clip-path", "url(#clip)"); | |
| focus.append("circle") | |
| .attr("class", "y") | |
| .style("fill", "none") | |
| .style("stroke", "steelblue") | |
| .attr("r", 4) | |
| .attr("clip-path", "url(#clip)"); | |
| focus.append("text") | |
| .attr("dy", ".35em") | |
| .attr("clip-path", "url(#clip)"); | |
| chartBody.append("svg:path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("d", priceSeries); | |
| svg.append("rect") | |
| .attr("id","rect") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("fill", "none") | |
| .style("pointer-events", "all") | |
| .on("mouseover", function() { focus.style("display", null); }) | |
| .on("mouseout", function() { focus.style("display", "none"); }) | |
| .on("mousemove", mousemove); | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).ticks(0)); | |
| svg.append("g") | |
| .call(d3.axisLeft(y).ticks(0)); | |
| d3.select("#rect").call(zoom); | |
| d3.select("button").on("click", resetted); | |
| function mouseDate(scale) { | |
| var g = d3.select("#group")._groups[0][0] | |
| var x0 = scale.invert(d3.mouse(g)[0]), | |
| i = bisectDate(data, x0, 1), | |
| d0 = data[i - 1], | |
| d1 = data[i], | |
| d = x0 - d0.date > d1.date - x0 ? d1 : d0; | |
| return d; | |
| } | |
| function mousemove() { | |
| var transform = d3.zoomTransform(this); | |
| var xt = transform.rescaleX(x), yt = transform.rescaleY(y); | |
| d = mouseDate(xt); | |
| focus.select("circle.y") | |
| .attr('cx', function() { | |
| return transform.applyX(x(d.dt)); | |
| }) | |
| .attr('cy', function() { | |
| return transform.applyY(y(d.price)); | |
| }); | |
| focus.select("text") | |
| .text(formatCurrency(d.price)) | |
| .attr('x', function() { | |
| return transform.applyX(x(d.dt))+10; | |
| }) | |
| .attr('y', function() { | |
| return transform.applyY(y(d.price)); | |
| }); | |
| } | |
| function zoomed() { | |
| gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); | |
| gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); | |
| var t = d3.event.transform, xt = t.rescaleX(x), yt = t.rescaleY(y) | |
| svg.select(".line") | |
| .attr("d",priceSeries.x(function(d) { return xt(d.dt);}) | |
| .y(function(d) { return yt(d.price);})); | |
| //d = mouseDate(x); | |
| focus.select("circle.y") | |
| .classed("zoomed", true) | |
| .attr("id","one") | |
| .attr('cx', function() {return t.applyX(x(d.dt)); }) | |
| .attr('cy', function() {return t.applyY(y(d.price)); }); | |
| focus.select("text") | |
| .text(formatCurrency(d.price)) | |
| .attr('x', function() { return t.applyX(x(d.dt))+10;}) | |
| .attr('y',function() {return t.applyY(y(d.price)); }); | |
| } | |
| function resetted() { | |
| d3.select("#rect").transition() | |
| .duration(750) | |
| .call(zoom.transform, d3.zoomIdentity); | |
| } | |
| }); | |
| </script> | |
| </body> |