翻译后,我试图放大SVG元素,但是当我开始初始缩放时,SVG的位置会重置为0,0。我希望变焦和平移从页面加载的移动位置开始。
<svg id="#svg">
<g id="#mainGrid>
....a bunch of SVG
</g>
<svg>
<script>
var winCenterV = $(window).height()/2;
var winCenterH = $(window).width()/2;
//set mainGrid to the center of
为了性能起见,我在D3.js中构建了一个世界地图,我使用的是World地图集110米版,但是我想在放大时增加地图的细节。
我也想改变投影,因此当我点击美国时的topojson文件。(即使用geoAlbersUsa(),并呈现US状态)
我已经有了一些非常基本的功能,改变地图投影点击,但我正在挣扎如何更改topojson文件。
import * as d3 from "d3";
import { feature } from 'topojson';
var projections = [
{name: "mercator", value: d
我尝试在div中显示我的地图--但我希望这个地图仅限于div-size --现在,它也忽略了w,h值和vis css设置。
设置svg的高度和宽度有意义吗?当我把投影的比例放上去时,它总是比组织的规模更大。svg。
var w = 200;
var h = 300;
// this will attach a svg-element with the class "map" to "mydiv"
var map = d3.select("#mydiv").append("svg:svg")
.attr("widt
我正在使用d3.zoomBehavior在地图上启用平移和缩放。它工作得很好。我还编写了代码,将地图重新定位在一个聚焦的项目上,这也是有效的。如果用户手动缩放或平移(检查地图控件是否“脏”),我希望禁用此“自动重新定位”功能。 当用户手动移动地图时,我如何访问事件? 我尝试过访问拖动、滚轮和缩放事件: d3.select("svg").call(this.zoomBehavior).on("wheel", () => {
console.log("user has zoomed with wheel"); // never gets
我激活和停用缩放行为,如中所示:
var zoom = d3.behavior.zoom().on("zoom", rescale)
// after adding the handler, the mouse wheel will still scroll the page
// activate
svg_g_element.call(zoom)
// now, the mouse wheel zoom
// desactivate
svg_g_element.call(d3.behavior.zoom().on("zoom")
// now,
我有地图。我希望用户能够缩放和平移地图。想象一下Google,但地图不是无限可用的,而是一个正方形(如果你越过地图的边缘,它就不会再被包围)。
我已经使用scale()和translate()实现了缩放和pan。这些效果很好。
我被困在最后的部分--当用户放大时,我想围绕这个点进行缩放。很难用语言来解释,所以想象一下谷歌地图中的鼠标轮会发生什么--这就是我想要的。
我看了每一个答案,其中任何一个在标题中。大多数是上的变体,基本上说这是我需要做的:
ctx.translate(/* to the point where the mouse is */);
ctx.scale(/* to zoom
使用的示例使用d3.v3映射美国地图:
我希望地图能够在页面加载时缩放到标记的位置,但是应该呈现整个地图,以便用户可以放大。
var w = 300;
var h = 280;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([300]);
//Define path generator
var path = d3.geo.path()
.projec
我有一个强制有向图,有数百个节点和链接,但窗口太小,它不能显示所有节点(链接)。我必须在chrome浏览器中向下或向上滚动才能看到所有数据。下面是我的窗口代码,如何缩放所有数据以适应当前窗口
var width = 2400;
var height = 1500;
var color = d3.scale.category20c();
var svg = d3.select("body").append("svg")
.attr("width", width