放大/缩小时,在地图上保持 D3 对象大小不变
Keep D3 objects size constant on Map while zoom in/out
我正在遵循 http://bl.ocks.org/d3noob/raw/5193723/的例子
放大时,示例中绘制的卷轴的大小会增加。我无法找到一种可以保持圆圈大小不变的方法。
有什么想法吗?
编辑1:关于如何在半径内保持饼弧恒定的任何想法。我已经找到了将圆保持在恒定半径的方法,如下所示:
g1.append("circle")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 10)
.style("fill", "red");
var zoom = d3.behavior.zoom().on("zoom", function () {
g1.selectAll("circle")
.attr("transform", "translate(" + d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")")
.attr("r", function(d) {
return 10/d3.event.scale;
});
});
同样,我有饼图的弧形,我希望在缩放时保持其大小:
var r = 4;
var p = Math.PI * 2;
var arc = d3.svg.arc()
.innerRadius(r - 2)
.outerRadius(r - 1)
.startAngle(0)
.endAngle(p * d.value1);
var arc2 = d3.svg.arc()
.innerRadius(r - 3)
.outerRadius(r - 2)
.startAngle(0)
.endAngle(p * d.value2);
var projection = d3.geo.mercator()
.center([0, 5])
.scale(200)
var translate = "translate(" + projection([77, 13])[0] + ", " + projection([77, 13])[1] + ")";
g.append("path")
.attr("d", arc)
.attr("fill", "maroon")
.attr("transform", translate);
g.append("path")
.attr("d", arc2)
.attr("fill", "green")
.attr("transform", translate);
关于如何保持弧形路径以保持相同大小的任何建议?
您必须在缩放事件处理程序中添加一些额外的处理。将圆的半径设置为其标称值 (5) 除以缩放系数 ( zoom.scale()
)。这样,当应用缩放缩放时,结果将是恒定的表观大小。像这样:
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection))
.attr("r", 5/zoom.scale());
g.selectAll("path")
.attr("d", path.projection(projection));
});
相关文章:
- 在对象数组中查找多个值的d3范围
- 我如何使用D3来强制用户点击g.node对象内部的圆形对象
- D3对象全部渲染为0px x 0px,没有属性
- 求和d3对象数组上的元素
- d3.js力布局图:如何从头开始构建nodes对象
- 如何传递在d3.js中调用javascript事件的同一对象
- 在呈现 D3 SVG 对象之前更改引导按钮文本
- D3:使用变量访问绑定数组中的对象
- d3:对象的子数组
- TypeError:undefined不是使用d3.map的对象
- 通过flask服务器上的队列访问d3.json对象时出现问题
- 如何访问D3的JSON中的子对象
- 比较D3.js中的两个时间对象
- 我正在尝试用D3可视化我的json对象.我希望日期是x轴,y是销售额.数值存储为字符串
- d3.js强制可折叠图-输入数据是对象数组
- d3.extent() 在对象键(不是值)上
- 如何从 d3.js 中的给定对象数组中获取数据
- 使用 D3.csv 设置对象的数据属性
- D3 - 在两个不与其他对象相交的对象之间绘制一条线
- 如何将 jQuery 对象转换为 d3 对象