小编spr*_*ose的帖子
Leaflet中的svgs上的d3-tip偏移,仅限Firefox,不起作用
我正在使用d3-tip插件来显示各国的工具提示.这些国家/地区是位于Leaflet基础层顶部的svg图层.我希望工具提示在每个状态中居中.我目前拥有的功能非常适合所有浏览器,除了Firefox.Firefox就是这样.我试图调整Firefox,但它会被取消,具体取决于浏览器窗口的大小.
有关如何解决此问题的任何想法？
这是一个Plunker:https://plnkr.co/edit/1FLMkbMSZmF59dxloIlY ？ p = preview
悬停在德克萨斯州时Firefox中的外观截图:
码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet-src.js"></script>
<script src="d3.tip.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
body{
margin: 0px;
font-family:Arial, sans-serif;
}
/* geojson components */
#map {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index:0;
}
path.states { fill: #ff3300; fill-opacity: .65; stroke: #fff; stroke-width: 3px;}
path.states:hover {
fill-opacity: 1;
}
/* Leaflet */
.leaflet-container { …推荐指数
解决办法
查看次数
如何为具有焦点和上下文的面积图实现 d3 的输入更新退出模式？
我有一个带有焦点和上下文部分的面积图。上下文部分允许用户更改焦点部分中显示的时间段。
这些数据包括随时间变化的人口信息，并且包括性别。我希望能够在“男性”、“女性”和“所有人”之间切换。我开始了这项工作，因为我正在获取所需的数据并将其输入图表。但是，当我单击另一个选项时，面积图不会退出，因此“男性/女性/所有人”的图表彼此堆叠在一起。
谁能帮我解决这个问题吗？
代码如下，这是一个小提琴： https: //jsfiddle.net/3wtrsegp/
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.brush rect.selection {
fill: none;
opacity: 1;
}
rect.handle{
fill: #666;
}
</style>
</head>
<body>
<div id="buttons">
<button id="All" class="button selected">All</button>
<button id="Men" class="button">Men</button>
<button id="Women" class="button">Women</button>
</div>
<div id='ptchart'></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var json = [
{
"date": "2020-01-02",
"gender": "Men",
"value": 4320
},
{
"date": "2020-01-02",
"gender": "Women",
"value": 984
},
{
"date": "2020-01-15",
"gender": "Men",
"value": 4624
},
{
"date": "2020-01-15",
"gender": "Women",
"value": 1005 …推荐指数
解决办法
查看次数
使用 Zoom.center 转换 d3v6 Observable 示例
我有一个项目，我试图缩放到特定点。在 d3v3 中，我可以用这个函数来做到这一点
function zoomTo(place, pscale) {
projection = d3.geo.mercator()
.scale((1 << pscale) / 2 / Math.PI)
.translate([width / 2, height / 2])
center = projection(place);
return zoom
.scale(projection.scale() * 2 * Math.PI)
.translate([width - center[0], height - center[1]]);
}
不过，缩放已经改变，这在 d3v6 中不再起作用。
我在 Observable 上找到了一个使用 d3v6 完全满足我要求的示例： https://observablehq.com/d/9035ed7049aaa8c6
但是，我不知道如何将其翻译为普通的 JavaScript。以下是我的尝试。我收到此错误：
d3.zoom(...).scaleExtent(...).on(...).center is not a function
不过，它在 Observable 中运行良好，所以显然我错过了一些东西。任何帮助将不胜感激！（另外，我不需要 Observable 示例顶部的按钮，因此我将它们注释掉了。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom to Point</title>
<script src="https://files-7y4qaclbi.vercel.app/d3-zoom.js"></script> …推荐指数
解决办法
查看次数
如何在 Three.js 中将 geoJSON 绘制为网格而不是线条，并填充颜色？
我正在使用 Three.js 制作一个地球仪，并将添加一些数据层。所有图层都将从 geoJSON 创建。我已将其设置为使地球仪（第一个数据文件，包含国家/地区）显示为线条。这使用ThreeGeoJSON。
然而，我想要的不仅仅是轮廓。我想让这些国家充满色彩。
我当前的项目可以在这里看到： http://bl.ocks.org/jhubley/321232d4ccefefcdc53218fd0adccac5
代码在这里： https: //gist.github.com/jhubley/321232d4ccefefcdc53218fd0adccac5
我尝试创建一个新函数，将多边形和多边形渲染为网格而不是线。该函数如下：
function drawShape(x_values, y_values, z_values, options) {
var shape_geom = new THREE.BoxGeometry();
createVertexForEachPoint(shape_geom, x_values, y_values, z_values);
var shape_material = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
var shape = new THREE.Mesh(shape_geom, shape_material);
scene.add(shape);
clearArrays();
}
不幸的是，当我使用它时，什么也没有出现。控制台中没有错误可以帮助我理解原因。
谁能解释一下我如何设置这些国家才能填补这些国家？任何建议或指示将非常感激。
推荐指数
解决办法
查看次数
使用rangeRoundBands的d3条形图 - 为什么有外部填充？
我正在使用x轴的序数比例创建条形图,并使用rangeRoundBands.我正在关注这个例子:https://bl.ocks.org/mbostock/3885304
但是,我的图表有外部填充 - 轴的开始和结束处的大空间,我希望这些条完全延伸.下面的屏幕截图显示了我指的是红色圆圈的空格.
我怎样才能删除这些空格？我需要我的边距和svg的宽度和高度保持不变.
这是一张带有图表的Plunker,现在是:https://plnkr.co/edit/gMw7jvieKSlFbHLTNY9o？p = preview
代码如下:
<!doctype html>
<html>
<head>
<style>
.axis path{
fill: none;
stroke: #cccccc;
stroke-width: 2px;
}
.x.axis text{
display:none;
}
.bar{
fill: blue;
}
body{
font-family:Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="barchart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 0, bottom: 50, left: 300},
width = 800 - margin.left - margin.right;
height = 465 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], …推荐指数
解决办法
查看次数
使用 page.js 路由在 Svelte 应用程序中锚定链接
我的 Svelte 应用程序的页面上有一个锚标记。锚点的链接在页面本身上有效，但我无法从其他页面链接到锚点。当我输入带有锚点的 URL 时，页面不会向下滚动。我需要能够为人们提供一个链接并让他们转到页面的特定部分。
这是相关代码：
<script>
function scrollIntoView({ target }) {
const el = document.querySelector(target.getAttribute("href"));
if (!el) return;
el.scrollIntoView({
behavior: "smooth",
});
}
</script>
<nav>
<a href="#here" on:click|preventDefault={scrollIntoView}>go to anchor</a>
</nav>
<main>
<section id="section-1">
... lots of lorem ipsum ...
</section>
<section>
<h2 id="here">anchor</h2>
我这里有一个 REPL：https://svelte.dev/repl/e651218bdb47455d9cafe8bff27c8d7b ?version=3.24.0
我使用 page.js 来路由到组件——我在文档中没有找到任何关于定位锚标记的具体内容。
任何帮助将不胜感激。
推荐指数
解决办法
查看次数
循环遍历对象并返回所有属性数组的值
我有一个带有一堆属性的javascript对象.在此示例中,每个属性表示一件衣服,带有一个键,然后是一个数组值.
var clothes = {
CLO1: ["shirt", "cotton", "white"],
CLO2: ["tie", "silk", "red"],
CLO3: ["shoes", "leather", "black"]
};
我想循环遍历每一件衣服并打印出每件衣服的颜色.我正试图找出最简洁的方法来做到这一点.像这样的东西 -
for (property in object) {
if (property[key]){
return (property[2])
} else { return "none";
}
任何想法都会非常感激.我希望这是有道理的.谢谢!
推荐指数
解决办法
查看次数