个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我一直在尝试在投影上使用 .scale().translate。但是，我无法创建正确的比例。我的似乎在网页上显示小 map 并且无法更改其大小(当我尝试更改它时，它消失了，这可能不是正确的比例......)。在照片中，您可能会在页面顶部看到一张带有我的 h1 标题的小 map 。有谁知道如何制作合适的秤？我已经坚持了很长时间，请帮忙:(
这是我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./dist/main.css" />
<script src="./dist/main.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="neighborhood.js"></script>
<title>Project Name</title>
</head>
<body>
<h1>House Price in the Bay Area</h1>
<svg id="my_dataviz" width="400" height="300"></svg>
<script src="index.js"></script>
<script src="neighborhood.js"></script>
</body>
</html>
这是我的 .js 文件
var canvas = d3.select("body").append("svg")
.attr("width", 900)
.attr("height", 600)
d3.json("Bay_Area_Counties.geojson", function (data) {
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var projection = d3.geoMercator().**scale().translate([])**;
var path = d3.geoPath(projection);
var areas = group.append("path")
.attr("d", path)[![ ][1]][1]
.attr("class", "area")
.attr("fill", "steelblue");
});
最佳答案
如果放大时该点消失，则可能翻译有误。
d3 投影有一个中心。标记投影中心的以度为单位的坐标。平移值是中心应投影到的坐标(以像素为单位)。
当我们放大时，中心点仍然投影到平移点，其他一切都在移动。如果我们放大得足够远(即足够大的缩放值)，中心点以外的所有内容都将超出框架:
因此，如果在放大时您的 map 项从 map 上掉落，我们需要一个新的中心坐标。最好在您感兴趣的要素内并大致在其地理中心选择一个坐标。现在您可以尝试使用比例因子来正确显示您感兴趣的区域。
在不设置中心的情况下 - 当您将比例设置得更高时，D3 如何知道您想要关注什么？
您尚未提供功能的 geojson 或描述，因此希望以上内容足以让您获得良好的结果。但是，有一种更简单的方法。
手动设置 map 参数时，中心坐标很有用，传统上翻译值是 SVG/Canvas/Container 的中间。但是，projection.fitSize/fitExtent 将设置平移和比例值，以便感兴趣的特征自动填充指定的像素范围。
此方法不设置中心坐标 - 如有必要，它会将中心坐标平移到屏幕外，以便感兴趣的地理特征与指定的像素范围相交。这意味着平移值取决于比例，并且在使用这些拟合方法后我们无法像以前一样轻松地修改投影参数。
使用 projection.fitSize() 我们指定 SVG 的宽度和高度以及我们希望显示的 geojson 对象:projection.fitSize([width,height],feature)。 fitExtent类似但允许指定边距(D3 的文档有详细信息)，对于不同的间距选项也有一些类似的方法(再次在文档中比我在这里做的更好)。
关于javascript - 如何在 d3.js 中使用 .scale 和 .translate？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68356872/
27
4
0
我正在尝试在 View 中同时使用 scalegesture 监听器和 gesturelistener。如果比例为 1，则一切正常，但如果将比例设置为其他值，图像会跳到一个新位置，然后平滑缩放。 我的
我在使用 Canvas 和 canvas.scale(Scale, Scale) 时遇到图像质量问题；它们看起来完全像下面这样: android:运行时调整大小的图像质量 我相信我已经阅读了所有关于调
我有一个使用 svg 过滤器附加阴影的 svg 图形。我需要缩放阴影，但找不到可以执行此操作的过滤器。有谁知道这是否可能？
我正在构建一个逻辑回归分类器。 我从一组 500.000 条记录开始，我只想使用其中的一个样本。 你有什么建议: 1) 缩放总体然后采样2)缩放样本3) 仅缩放样本的 X_TRAIN 分割？ 为什么？
我有一个功能，我用它在鼠标进入时放大图片并在鼠标离开时返回到正常大小。问题是，如果我在允许图片返回正常大小之前快速将鼠标移出然后将鼠标移入，那么图片将从鼠标输入时当前的任何大小放大(x2.7) (并且
可以在 scale-y-2 中使用 zoomtovalues 吗？我在多个 y 轴上有几个系列，我想将每个 scale-y-n 缩放到特定值，但我不知道如何... 谢谢和问候， 最佳答案 我们在最近的
我正在尝试在 Android 中创建(我认为是)一个相对简单的动画。也就是说，我想让某个 TextView 在单击按钮时缩小到 0 并返回到 1。当我单击该按钮时实际发生的是 TextView 立即缩
我有一个元素需要缩放到父元素的 100%。因为该元素包含基于像素的动画和可以缩放的图像，所以我不能使用百分比。有没有办法使用 css transform scale 来做到这一点？ 最佳答案 相对 c
我在 ChartJS 中遇到一个奇怪的错误并且不知道如何修复它，由于这个错误我无法更改比例的任何内容。 我的代码(Sensor.tsx): import { useParams } from "sol
我有一些数据，我正试图通过不断增加的分母来准确和精确地处理这些数据。 请假设分子总是有小数。 我在 docs 中看到divide(BigDecimal divisor) 实际上会减小比例，这看起来很奇
喂， https://jsfiddle.net/jbwq6y87/7/ #box { width: 500px; height: 500px; transition: 0.5s; ov
几个 Tk 小部件也存在于 Ttk 版本中。通常它们具有相同的一般行为，但使用“样式”和“主题”而不是每个实例的外观属性(例如 bg 等)。这很好，因为 Ttk 小部件默认采用操作系统窗口管理器的“标
我尝试转换视频并使用 scale=-1:720 调整其大小，但出现错误“宽度不能被 2 整除”。我解决了这个问题:scale=-2:720。 之间有什么区别 scale=-1:720 和 scale=
我正在尝试重新创建此 codepen变换:我网站上特定页面的缩放转换，但它没有按预期工作 - 正如您在此代码片段中看到的那样(在整页上查看) - 图像覆盖/覆盖不足和不稳定而不是平滑。 /* Part
我有 3 个 Scale 小部件 scale1、scale2 和 scale3。我想使用 scale1 按以下方式控制 scale2 和 scale3 的值: 我不希望 scale2 和 scale3
我目前正在将我的数据分析从 R 转移到 Python。在 R 中缩放数据集时，我会使用 R.scale()，据我所知，它会执行以下操作:(x-mean(x))/sd(x) 为了替换该函数，我尝试使用
从文档中，定义为: 量化 ..a variant of linear scales with a discrete rather than continuous range. The input do
我有一个时基折线图，我正在尝试获取点击坐标处每个刻度的值。 我在 ChartJS 选项中指定的 onClick 函数: onClick: function(event, elementsAtEvent
我见过这样写的代码: ，但我也看到过这样写的代码: initial-scale=1 和 initial-scale=1.0 有区别吗？ 最佳答案 没有。 specification描述视口(viewp
给定 y 轴 (s) 上的缩放和 x 轴 (t) 上的平移参数，当目的是最大化曲线叠加(而不是最小化距离)时，如何缩放和对齐两条不重合的曲线？ 正如 @DWin 所指出的，这可能会被重新命名为“如何使
我是一名优秀的程序员,十分优秀！