現在d3.jsのforce layoutを勉強中です。
記事を見ながら実装したものだと、二本指を縦に動かすスクロールのような操作でしかズームできないという状況です。スマホのようにトラックパッドでピンチイン・アウトでもズームできるようにするにはどうすれば良いでしょうか?(ピンチイン・アウトでも若干ズームできるのですが、運動量が少なすぎてUXとしてかなりストレスのある仕様になっています。)
こちら参考にさせていただいたQiitaの記事です。→https://qiita.com/hirodos/items/47d53ab606390af97533
html
1var min_zoom = 0.4; 2var max_zoom = 5; 3var zoom = d3.zoom() 4 .scaleExtent([min_zoom, max_zoom]) 5 .on('zoom', SVGzoomed); 6 7 8 svg.call(zoom); 9var g = svg.append("g") 10 .call(d3.drag() 11 .on('drag',SVGdragged)) 12 13function SVGzoomed() { 14 g.attr("transform", d3.event.transform); 15} 16 17function SVGdragged(d) { 18 d3.select(this).attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y); 19 };
あなたの回答
tips
プレビュー