- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
你可以在给定的地球旋转链接中看到
https://codepen.io/Designer12/pen/pXxKEQ
在那里,你可以看到太多垂直和水平的蓝线,我只需要两三条线...
从脚本中,我从
中删除了 map 颜色var colorWater = '#fff'
var colorLand = 'transparent'
var colorGraticule = '#1288C9'
var colorCountry = 'transparent'
我认为那条线与这个变量“Graticule”有关,但我没有明白
最佳答案
根据the github :
graticule.stepMinor([step])
If step is specified, sets the minor step for this graticule. If step is not specified, returns the current minor step, which defaults to ⟨10°, 10°⟩.
var graticule = d3.geoGraticule10();
等于
var graticule = d3.geoGraticule().stepMinor([10, 10])();
因此,您可以像这样更改数组中的数字以获得您想要的内容
var graticule = d3.geoGraticule().stepMinor([90, 30])();
//
// Configuration
//
// ms to wait after dragging before auto-rotating
var rotationDelay = 1000
// scale of the globe (not the canvas element)
var scaleFactor = 0.9
// autorotation speed
var degPerSec = 6
// start angles
var angles = {
x: -20,
y: 40,
z: 0
}
// colors
var colorWater = '#fff'
var colorLand = 'transparent'
var colorGraticule = '#1288C9'
var colorCountry = 'transparent'
//
// Handler
//
function enter(country) {
var country = countryList.find(function(c) {
return c.id === country.id
})
current.text(country && country.name || '')
}
function leave(country) {
current.text('')
}
//
// Variables
//
var current = d3.select('#current')
var canvas = d3.select('#globe')
var context = canvas.node().getContext('2d')
var water = {
type: 'Sphere'
}
var projection = d3.geoOrthographic().precision(0.1)
// var graticule = d3.geoGraticule10();
var graticule = d3.geoGraticule().stepMinor([90, 30])();
var path = d3.geoPath(projection).context(context)
var v0 // Mouse position in Cartesian coordinates at start of drag gesture.
var r0 // Projection rotation as Euler angles at start.
var q0 // Projection rotation as versor at start.
var lastTime = d3.now()
var degPerMs = degPerSec / 1000
var width, height
var land, countries
var countryList
var autorotate, now, diff, roation
var currentCountry
//
// Functions
//
function setAngles() {
var rotation = projection.rotate()
rotation[0] = angles.y
rotation[1] = angles.x
rotation[2] = angles.z
projection.rotate(rotation)
}
function scale() {
width = document.documentElement.clientWidth
height = document.documentElement.clientHeight
canvas.attr('width', width).attr('height', height)
projection
.scale((scaleFactor * Math.min(width, height)) / 2)
.translate([width / 2, height / 2])
render()
}
function startRotation(delay) {
autorotate.restart(rotate, delay || 0)
}
function stopRotation() {
autorotate.stop()
}
function dragstarted() {
v0 = versor.cartesian(projection.invert(d3.mouse(this)))
r0 = projection.rotate()
q0 = versor(r0)
stopRotation()
}
function dragged() {
var v1 = versor.cartesian(projection.rotate(r0).invert(d3.mouse(this)))
var q1 = versor.multiply(q0, versor.delta(v0, v1))
var r1 = versor.rotation(q1)
projection.rotate(r1)
render()
}
function dragended() {
startRotation(rotationDelay)
}
function render() {
context.clearRect(0, 0, width, height)
fill(water, colorWater)
stroke(graticule, colorGraticule)
fill(land, colorLand)
if (currentCountry) {
fill(currentCountry, colorCountry)
}
}
function fill(obj, color) {
context.beginPath()
path(obj)
context.fillStyle = color
context.fill()
}
function stroke(obj, color) {
context.beginPath()
path(obj)
context.strokeStyle = color
context.stroke()
}
function rotate(elapsed) {
now = d3.now()
diff = now - lastTime
if (diff < elapsed) {
rotation = projection.rotate()
rotation[0] += diff * degPerMs
projection.rotate(rotation)
render()
}
lastTime = now
}
function loadData(cb) {
d3.json('https://unpkg.com/world-atlas@1/world/110m.json', function(error, world) {
if (error) throw error
d3.tsv('https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/world-country-names.tsv', function(error, countries) {
if (error) throw error
cb(world, countries)
})
})
}
// https://github.com/d3/d3-polygon
function polygonContains(polygon, point) {
var n = polygon.length
var p = polygon[n - 1]
var x = point[0],
y = point[1]
var x0 = p[0],
y0 = p[1]
var x1, y1
var inside = false
for (var i = 0; i < n; ++i) {
p = polygon[i], x1 = p[0], y1 = p[1]
if (((y1 > y) !== (y0 > y)) && (x < (x0 - x1) * (y - y1) / (y0 - y1) + x1)) inside = !inside
x0 = x1, y0 = y1
}
return inside
}
function mousemove() {
var c = getCountry(this)
if (!c) {
if (currentCountry) {
leave(currentCountry)
currentCountry = undefined
render()
}
return
}
if (c === currentCountry) {
return
}
currentCountry = c
render()
enter(c)
}
function getCountry(event) {
var pos = projection.invert(d3.mouse(event))
return countries.features.find(function(f) {
return f.geometry.coordinates.find(function(c1) {
return polygonContains(c1, pos) || c1.find(function(c2) {
return polygonContains(c2, pos)
})
})
})
}
//
// Initialization
//
setAngles()
canvas
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended)
)
.on('mousemove', mousemove)
loadData(function(world, cList) {
land = topojson.feature(world, world.objects.land)
countries = topojson.feature(world, world.objects.countries)
countryList = cList
window.addEventListener('resize', scale)
scale()
autorotate = d3.timer(rotate)
})
html,
body {
margin: 0;
padding: 0;
background: #555;
}
#globe {
cursor: move;
}
#current {
position: absolute;
color: white;
font-family: sans-serif;
margin-left: 4%;
margin-top: 4%;
}
<canvas id="globe"></canvas>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js'></script>
<script src='https://d3js.org/d3-geo.v1.min.js'></script>
<script src='https://d3js.org/topojson.v2.min.js'></script>
<script src='https://bl.ocks.org/mbostock/raw/7ea1dde508cec6d2d95306f92642bc42/6aac691494f752142a67cc43c51a0fd09896dbd4/versor.js'></script>
<script src="./script.js"></script>
关于javascript - 在 Dynamic Globe Rotation 中有太多垂直和水平线我不想要太多线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56929059/
如何将多个json对象添加/映射到dart对象 import 'dart:async'; import 'dart:convert'; import 'package:flutter/foundati
我正在研究将产品集成到 Dynamics Great Plains 中。我之前使用过 Dynamics CRM,但没有使用过 Great Plains。我听说 GP 与 CRM 是不同的动物,即使它们
System.Linq.Dynamic.Core 和 System.Linq.Dynamic 有什么区别?我目前正在使用 System.Linq.Dynamic 并且它不包含对 的支持选择 和 多选
我正在尝试通过Firebase存储将图像上传到Firebase,然后在Firestore中创建一个文档,其中包含上述上传图像的网址。为此,我使用此功能 void uploadImageAndCr
我一直在尝试整理一些东西,使我可以从 ListPlot 中提取点,以便在进一步的计算中使用它们。我目前的方法是使用 Locator[] 选择点。这适用于显示点,但我无法弄清楚如何从带有 head Dy
只要我在与 Program 类相同的程序集中有类 ClassSameAssembly ,下面的代码就可以正常工作。但是,当我将类 ClassSameAssembly 移动到单独的程序集时,会引发 Ru
我只是尝试从Firebase实时数据库解析数据。 但在转换为模型时有问题 我正在尝试从Flutter上解析Firebase数据库中的数据。 但是一个错误说 MY Complete QUIZ: {-M5
我创建了一个方法,当我构建它时,出现了这个错误: type '_InternalLinkedHashMap' is not a subtype of type 'List' in type cast
我对这个 flutter 的简单图表代码有疑问。在我尝试运行代码时显示此错误。请任何人都可以帮助我在这.... The argument type 'List>' can't be assigned
我尝试在我的 flutter 应用程序中解析来自 Firestore 的文档。 Firestore 文档: 我创建了两个类来解析这个文档。 类产品: class Produkt{ String n
我有一个2d-List,其中包含一个字符串和一个Map,如下所示: List> content = [ [ "String", { "one": 23,
我使用 Dart“json_serializable”包在 Flutter 应用程序中的 Firestore 数据结构下反序列化。 { googleBookId: jjl4BgAAQBAJ, prov
我注册了 Dynamic CRM 在线试用版(30 天)并创建了一个非托管自定义解决方案(新字段、一些自定义实体等)。现在,我想导出非托管解决方案并将其导入到我的服务器中的 Dynamic CRM O
当我尝试从 StreamTransform 获取一些数据时遇到一些问题 我不明白什么是正确的数据类型 未捕获的异常:类型错误:“_StreamHandlerTransformer”的实例:“_Stre
我正在尝试获取用户数据,但在这样做时出现以下错误: Exception: type '_InternalLinkedHashMap' is not a subtype of type 'Map 我查看
我正在尝试在 sqflite 数据库中保存一些带有 flutter 的数据,但我仍然收到一条错误消息: [ERROR:flutter/shell/common/shell.cc(181)] Dart
我有一个JSON响应,结构如下:。在这个JSON响应中,有各种动态键,如“Owner”和“Master”,每个键都包含一个JSON对象或一个JSON对象数组。我需要创建一个gson数据类来解析这个动态
在 Dynamics 2012 ax 中编译 CIL 时,我看到以下错误 - 名称为“Dynamics.Ax.application”的重复类型。在程序集中“Dynamics.Ax.applicati
我有一个带有 LinkedHashMap 成员的 StatefulWidget 小部件,如下所示: LinkedHashMap _items = new LinkedHashMap>(); 现在我需要
我正在尝试按照此处所述实现搜索资源功能:https://cloudblogs.microsoft.com/dynamics365/it/2019/05/21/retrieve-resource-ava
我是一名优秀的程序员,十分优秀!