D3数据可视化之——拖拽移动和缩放

最新推荐文章于 2024-07-12 17:35:21 发布

yudajiangshan(微信号)

最新推荐文章于 2024-07-12 17:35:21 发布

阅读量6.4k

点赞数 3

分类专栏：数据可视化文章标签： D3 数据可视化拖拽缩放

数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考：https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084

<!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;//获取抓取对象时的起始点,还没弄清楚k,x,y的含义，感觉k像是缩放比例，x,y分别是x轴、y轴的起始点
    consol.log(transform);//控制台输出结果：{k: 1, x: 0, y: 0}
var points = d3.range(2000).map(phyllotaxis(10));

var g = svg.append("g");

g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5)
    .call(d3.drag()
        .on("drag", dragged));

svg.call(d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed));

function zoomed() {
  g.attr("transform", d3.event.transform);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function phyllotaxis(radius) {
  var theta = Math.PI * (3 - Math.sqrt(5));
  return function(i) {
    var r = radius * Math.sqrt(i), a = theta * i;
    return {
      x: width / 2 + r * Math.cos(a),
      y: height / 2 + r * Math.sin(a)
    };
  };
}

</script>

yudajiangshan(微信号)

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
D3数据可视化之——拖拽移动和缩放

参考：https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084<!DOCTYPE html><meta charset="utf-8"><svg width="960" height="500"></svg><script src="https://d3js.org/...
复制链接

扫一扫

专栏目录