1回答
用D3.js制作定制的虚构地图
、、、、
我正在为一个附带的项目提出一个想法，并就技术方面的发展方向寻求建议。我已经做了一些研究，但仍然对现实的选择感到困惑。
我想制作一个基于虚拟世界(想想中间地球)的交互式地图，包括一个时间线过滤器和一个细节部分，以获得关于事件或位置的其他信息。
想要的特性：
左边的地图
右侧的详细信息窗格
时间线滑块/底部过滤器
领地
政治派别的颜色
在详细信息窗格中显示详细信息
标签
城市标签
跨栏：
获取一个干净的地图图像来处理。
将图像映射为中间格式(svg、geojson、topojson?)
在网页、样式图、添加动画等上显示地图。
浏览 5提问于2015-02-12得票数 4
2回答
我正在尝试写一个程序，在Adobe Illustrator中创建的两个形状之间使用javascript步进。我可以通过将图形导出为SVG然后使用Raphael.js来实现：
然而，两个形状之间的插值看起来相当糟糕。我从 那里了解到，最好使用使用b样条曲线的算法进行插值，并在适当的地方添加或减去顶点，我假设拉斐尔使用的SVG标准不这样做。我想知道是否有可能用d3.js来实现这一点，因为我注意到它的SVG文档中有插值选项，而"basis“似乎使用了b样条。我的jsfiddle可以通过适当的插值在d3中完成吗？
或者，有没有更好的方法来解决这个问题呢？我使用SVG可能走错了路，因为生成的路
浏览 4提问于2012-08-09得票数 3
毫无疑问，答案是非常基本的，但我一直在寻找答案，但没有找到任何答案。
我刚刚开始使用snap.svg。我按照文档操作，可以使用Snap (s)对象创建对象，但不能使用Paper对象。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snap Test</title>
<link rel="stylesheet" href="css/style.cs
浏览 0提问于2015-11-10得票数 2
我正在研究在项目中使用什么图形，而Raphael.js成为了最有力的竞争者。但是，在阅读示例代码和文档时，它显示了拉斐尔创建了一个画布(通过上的纸张变量)，然后向其中添加内容。两个月后，一个路人过来问了一些关于我们项目的问题，我解释说，我们没有使用拉斐尔(相反，我们选择了静态SVG和D3)，因为拉斐尔使用的是canvas的，而我们的项目如果使用canvas的，将会非常不利。你可以在哪里链接到它，这样你和/或我可以发送一个pull请求来更好地解释这一点。
浏览 0提问于2013-04-25得票数 4
回答已采纳
这就是我们的交易，我正在和SVG和Snap.svg做一些实验。我有一个外部的SVG文件logo.svg，它是用Adobe创建的，下面是标记：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http
浏览 0提问于2014-03-07得票数 0
回答已采纳
2回答
让我们考虑它的SVG表示形式中的以下简单映像(运行代码片段将显示它)：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.
浏览 4提问于2015-05-14得票数 0
3回答
谷歌机器人将根据周围的标签对单词进行排序。当然，h1标记之间的文本比另一个h{n}元素或p元素的内容有更多的分数。
但是，当单词更大、更粗体或更斜体时，Google是否足够聪明，能够理解它们更重要(由HTML或CSS定义，甚至由外部资源定义)？
如果是，这是否也适用于SVG text元素？
浏览 0提问于2017-01-03得票数 1
1回答
如何在SVG元素中添加文本
、、、、
我想在一个元素中添加文本，这样我的简介就在一个矩形的透明元素后面。
我尝试在SVG中添加文本，如下所示
<svg height="150" width="500">
<text x="100" y="30" fill="red">I love SVG!</text>
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%
浏览 0提问于2020-04-23得票数 0
我是一名大学生，目前正在为我的团队开发一个网页项目。一开始，我选择使用dagre-d3库来构建图形，它们在Chrome上工作得很好。然后我意识到SVG中的ForeignObject元素在IE上是不起作用的(IE恰好是支持的主要浏览器)。
因为我的目标基本上是在每个图形组件中填充HTML内容，所以我想知道是否有任何解决方法可以在仍然使用dagre-d3的IE上实现这一点。或者对不同的图形库有什么建议？
更新：
本质上，我想创建如下截图所示的图形：
下面是我现在使用dagre-d3构造图形的代码：
HTML代码片段：
<div id="graph-section">
浏览 29提问于2013-12-12得票数 12
我的配置是：
Windows VistaXAMPP 1.7.1媒体维基+语义MW使用Graphviz创建SVGGraphviz 2.26.3 (安装目录c:\graphviz.....)
一切都很好，但问题是: xml标记
‘'image xlink:href="some_image.png"....’
在使用Media Wiki php页面创建的SVG文件中缺少。
这是通过以下方式完成的：
$cmdlinesvg = wfEscapeShellArg($cmd).‘-T svg '.wfEscapeShellArg($src).’-o '.wfEsca
浏览 8提问于2011-01-06得票数 0
4回答
我已经决定使用框架来开发我自己的自定义wordpress主题？但是我不知道该用哪一个？或者我应该继续自己写所有的代码。我使用960作为css框架和jQuery作为js库。我们将竭诚为您提供帮助。
浏览 2提问于2010-08-08得票数 4
我对包含make文件的做了一些修改。当我用新克隆的代码库编译源代码时，它会编译成功，但当我在本地代码库上编译时，它似乎成功地遵守了，但它产生了一个svgedit.compiled.js文件Zero byes。没有任何警告。
这是我的(修改后的) Make文件：
NAME=svg-edit
VERSION=2.6
PACKAGE=$(NAME)-$(VERSION)
MAKEDOCS=naturaldocs/NaturalDocs
CLOSURE=build/tools/closure-compiler.jar
ZIP=zip
# All files that will be compiled
浏览 5提问于2012-06-18得票数 0
回答已采纳
3回答
我在运行svg.js的Laravel项目中使用了vue.js。
我就是这样使用svg.js的
步骤1:将svg.js作为插件安装在我的vue应用程序中。
import svgJs from "svg.js/dist/svg"
export default {
install(Vue) {
Vue.prototype.$svg = svgJs
}
}
步骤2:导入并使用插件。
import svgJs from "./plugins/vueSvgPlugin"
Vue.use(svgJs);
步骤3:然后我就可以这样做了。
co
浏览 0提问于2019-04-09得票数 2
回答已采纳
1回答
这个问题发布在Matlab Central ()上，但没有得到任何答案。我想这里可能有人有线索。
我经常使用publish()来制作在线课堂笔记。它工作得很好，但坦率地说，我发现PNG的绘图质量很差。我尝试过设置figureSnapMethod='antialiased'，这样做好一点，但我发现结果大多是模糊的。
最棒的是生成SVG图。有没有办法做到这一点？我认为它必须以某种方式涉及plot2svg (也来自文件交换)，因为SVG输出似乎只支持Simulink模型。或者，也许有人有更好的解决方案，使用其他高质量的格式。
浏览 1提问于2013-01-18得票数 2
我正在将Svg.js导入到我的typescript项目中。当我调用SVG时，我收到以下错误。Uncaught (in promise) TypeError: SVG is not a function 我尝试过以不同的方式导入Svg.js，但这似乎不是问题所在。我还尝试以不同的方式调用“SVG”。使用Svg.js版本@svgdotjs/svg.js": "^3.0.11 例如： import * as SVG from "@svgdotjs/svg.js";
const svgjs: any = SVG;
export default svgjs; l
浏览 193提问于2019-02-14得票数 1
1回答
在我的webpack.config.js文件中，我有几个js和svg入口点：
entry: {
scripts: './src/js/app.js',
vendor: ['vue', 'axios'],
svg: glob.sync('./src/img/svg/*.svg')
},
对于我的svg，我使用了sprite加载器：
module: {
rules: [
...
{
test: /\.svg$/,
浏览 0提问于2017-05-30得票数 0
1回答
几天前，我开始学习使用。
我可以使用svg.js版本2.7.1
SVG = require("svg.js") // 2.7.1
但是当我尝试使用3.0.12版本时，这是行不通的。
SVG = require("svg.js@3.0.12")
错误是
SVG = rt: unable to load package.json
当我尝试通过url加载时：
SVG = require("https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.js")
也有一个错误。
SVG = rt: inv
浏览 0提问于2019-05-03得票数 3
回答已采纳
1回答
eval函数(在JS、Python等中)类似于goto语句：
有时很有用。
很少有严格的必要。
通常被认为降低了代码的可读性和可理解性。
对大型代码库的许多风格指南的劝阻或禁止。
如果你问为什么goto如此恶毒，你很快就会被指到Dijkstra的著名。对于eval**?**，是否有等价的规范引用？
我不想讨论语言构造本身--我知道在Linux内核代码中鼓励goto使用某些模式，eval对于模块加载器非常重要，等等--我在讨论中询问权威引用。
浏览 5提问于2021-07-29得票数 1
2回答
用转角插件导入svg.js
、、、、
我很难导入svg.js和它的在一个角形5项目中使用类型记录。
在国家预防机制I安装后：
svg.js
在ticket.component.ts:导入Svg类型的svg.js中，这样我就可以绘制一个矩形，这段代码可以工作：
import * as Svg from 'svg.js'
...
export class TicketComponent implements OnInit {
ngOnInit() {
let draw = Svg('ticket-svg').size(1000, 500);
let rect =
浏览 0提问于2018-01-23得票数 5
回答已采纳
我尝试根据http://docs.mathjax.org/en/latest/web/typeset.html#converting-a-math-string-to-other-formats用MathJax创建一个SVG方程 它可以很好地处理内联方程： \( e=mc^2 \) 但在JavaScript中创建SVG时出错： MathJax.mathml2svg("x_2 = y^3") 下面是错误： tex-mml-svg.js:1 Uncaught Error: Unknown node type "body"
at o.error (tex-m
浏览 19提问于2020-03-31得票数 2
回答已采纳
我正在尝试将SVG文件加载到svg.js中。我的问题是，svg.js生成了svg标签，当我导入我的svg时，它最终得到了2个SVG标签，这导致了冲突。 main.js import Vue from 'vue'
import { SVG } from '@svgdotjs/svg.js';
Vue.prototype.$SVG = SVG; 模板 <div>
<button @click="importSVG">import</button>
<div ref="drawin
浏览 141提问于2020-02-02得票数 0
1回答
使用Raphael.js 2.0可以使用PAN获得基本的缩放/PAN效果，我没有遇到任何问题：
set = ( // set of elements, contained in a rectangle)
var start = function () {
set.oBB = set.getBBox();
},
move = function (dx, dy) {
var bb = set.getBBox();
set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy);
浏览 2提问于2012-06-04得票数 2
回答已采纳
由于我的问题的主题没有在任何其他线程中得到详细的回答，在官方的Svg.js网站上也没有很好的答案，所以我在一个新的帖子中发布了这个问题的详细说明。
1.我的开发堆栈是：
a.)CRA (创建-反应-应用)-“反应-脚本”："3.1.2“
b.)打字本-“打字本”："3.6.3“
c.)SVG.js - "@svgdotjs/svg.js"："^3.0.13“
2.我想实现的目标：
我希望导入正确的SVG.js，以便在我的元素中使用id=“绘图”来绘制元素内部的svg形状。
3.我的问题是：
如果我以这种方式导入我的Svg.js库：
import * as
浏览 2提问于2019-10-03得票数 2
我使用svg.js和svg.pan-zoom.js使svg可以使用滚动缩放。就像svg.pan-zoom.js的演示()
这是我的代码，只是为了测试。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="svg.js">&l
浏览 2提问于2016-08-25得票数 0
回答已采纳
我有一个使用Svelte + Laravel +惰性的项目，我正在开发一个页面，该页面具有记录分页功能。但是，当我更改页面号时，控制台中会显示一个错误，应用程序将停止工作。
app.js:108643
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'removeChild')
at detach (app.js:108643:19)
at Object.d (app.js:83321:77)
at Object.d (ap
浏览 11提问于2022-04-13得票数 0
回答已采纳
我使用NPM安装了svg.js，并通过import "svg.js";将模块导入自定义元素文件，
import "svg.js";
class MyView2 extends PolymerElement {
static get template() {
return html`
<div id="drawing"></div>
`;
}
connectedCallback() {
super.ready();
var draw = SVG("dra
浏览 4提问于2019-06-02得票数 0
1回答
我使用Snap.svg使我的SVG元素具有交互性。
如何在所有其他形状的“前面”移动 Element.group 组？此操作将在悬停时进行。
下面是一个简单的JSFiddle示例：
我想让后面的两个圆圈在他们盘旋的时候走到最前面。
我知道Rapha l对单个元素具有类似的Element.toFront()形式的功能。两者的创建者都回答了一个类似的问题，但我无法将他的解决方案添加到我的hover设置中。
提前感谢您的帮助！
浏览 3提问于2014-09-02得票数 3
回答已采纳
3回答
我正在设计一个使用jointjs来绘制图形的UI。
我需要更改纸张的背景颜色，但我发现更改svg (例如background-color: #ff0000; )并不会影响.viewport的外观。
如何在jointjs Paper的背景中添加颜色？
谢谢
浏览 2提问于2015-09-24得票数 4
3回答
是否可以在React中基于Parent中的道具进行动态导入？ 对于我的代码： 父级 <Parent>
<Child icon="svg1" />
<Child icon="svg2" />
<Child icon="svg3" />
</Parent> 孩子 import svg1 from './svg1.js'
import svg2 from './svg2.js'
import svg3 from './svg3.js' s
浏览 27提问于2020-07-02得票数 0
我在WordPress博客上添加了Facebook的评论。评论框标题(表示x条评论，带有一个下拉箭头和一个“添加评论”链接)没有显示。请参阅上的默认注释框。
我在开始的body标签后面插入了以下内容：
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = i
浏览 1提问于2014-04-03得票数 0
1回答
有人能告诉我这段代码有什么问题吗？
Html：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.js
浏览 3提问于2012-01-10得票数 2
回答已采纳
1回答
我安装了svg.js作为开发依赖项。它在我的package.json中显示为svg.js": "^2.6.6"。
我可以使用以下命令在javascript文件中导入库：
import SVG from 'svg.js';
但是，如果我在Typescript文件中做同样的事情，我会得到错误：“无法找到模块svg.js”。
我还有一个名为"typings“的文件夹，里面有svg.js网站上的类型定义文件。
为什么我不能使用这个库？
浏览 18提问于2018-09-05得票数 3
我试图将SVG.js作为一个模块加载，以便可以在类型记录类内、外部命名空间模块中使用它。
我加载了SVG.js类型定义文件。原始的SVG.js文件仍然是纯JavaScript。
我不知道如何将SVG.js作为一个模块导入，所以我可以在类中使用它。我尝试过许多导入定义，但似乎都没有效果。
导入JavaScript库以便在类型记录类中使用的正确方法是什么？
我试过的：
import * as svg from '../../Libraries/svg-2.6.3.js';
“.不是一个模块”
import svg = require('../../Libraries/svg
浏览 2提问于2017-09-21得票数 1
我正在寻找一个解决方案关于高表出口到jsPDF格式。我使用此解决方案将图形作为图像导出到我的pdf -> 。
它工作得很好，但是对于一些图形，我无法生成图像，因为这个错误：
Uncaught TypeError: undefined is not a function -- canvg.js:2000
svg.Element.text.getAnchorDelta -- canvg.js:2010
svg.Element.text.renderChild -- canvg.js:1989
svg.Element.text.renderChildren -- canvg.js:679
sv
浏览 1提问于2015-04-13得票数 1
我将工具栏从Bootstrap中的字形图标更改为自定义的SVG，我通过外部引用SVG，因为我需要在一个.css文件中设置它们的样式。我的html组件如下所示：
<div class="container-fluid">
<button type="button" class="btn btn-info" [routerLink]="['editor/text-properties']">
<object type="image/svg+xml" da
浏览 20提问于2017-01-17得票数 2
回答已采纳
我想使用svg图像代替png图标，因为png渲染的图标质量不好。我有以下规范
"react-native": "^0.42.3",
"react-native-svg": "4.3.0",
"react": "^15.4.1"
在"npm install“之后，当我在我的项目中导入react-native-svg时，它抛出了以下错误
ERROR in ./node_modules/react-native-svg/lib/SvgTouchableMixin.js
Module not fou
浏览 1提问于2017-09-25得票数 0
所以当播放列表中的视频结束时，它就会停下来，显示缩略图和播放按钮。我打开控制台，注意到我得到的视频结果是赢了：
[Deprecation] HTML Imports is deprecated and will be removed in M73, around March 2019. Please use ES modules instead. See https://www.chromestatus.com/features/5144752345317376 for more details.
22:35:06.982 desktop_polymer_sel_auto_svg_home_
浏览 0提问于2019-06-08得票数 0
回答已采纳
谁能告诉我如何让SVG.js插件在节点中工作。我像这样使用svgdom，它为我提供了一个简单矩形的svg代码：
const window = require('svgdom')
const document = window.document
const {SVG, registerWindow} = require('@svgdotjs/svg.js')
registerWindow(window, document)
const canvas = SVG(document.documentElement)
canvas.rect(100,100).fill
浏览 2提问于2019-11-09得票数 0
我目前有一个使用D3的网站，我希望用户可以选择将SVG保存为SVG文件。我用crowbar.js来做这个，但是它只在铬上工作。safari没有发生任何变化，IE拒绝了crowbar.js中用于下载文件的crowbar.js方法的访问。
var e = document.createElement('script');
if (window.location.protocol === 'https:') {
e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-cr
浏览 6提问于2014-04-22得票数 95
回答已采纳
1回答
我有一个前端项目，工作流程在吞咽。
插件：
gulpfile.js:
var
gulp = require('gulp'),
...
var path = {
app : { // src
html : 'app/*.html',
js : 'app/js/*.js',
svg : 'app/**/*.svg',
},
dist : { //
浏览 1提问于2019-01-02得票数 13
我有两个名为play.svg和pause.svg的svg文件，它们正在另一个名为index.js的文件中使用。该目录如下所示：
app
components
index.js
pages
_app.js
public
play.svg
pause.svg
在index.js中是这样的：
import Image from 'next/image'
export default class Player extends Component {
render() {
return (
<Image
className="
浏览 0提问于2022-02-28得票数 1
回答已采纳
1回答
我试图在创建svg.js后，将使用.svg创建的元素自动保存为一个.svg文件。库有导出SVG的方法，但我还没有找到示例来学习如何使用它。例如，如果我想在下面的代码中保存我创建的rect，我如何才能这样做？
html：
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></scrip
浏览 4提问于2020-03-29得票数 2
回答已采纳
给定运行的JS脚本
目前，我使用以下方法将单个视图打印到output.svg文件中：
var jsdom = require('jsdom');
jsdom.env(
"<html><body></body></html>", // CREATE DOM HOOK:
[ 'http://d3js.org/d3.v3.min.js', // JS DEPENDENCIES online ...
'js/d3.v3.min.js' ],
浏览 1提问于2014-09-02得票数 1
回答已采纳
我使用svg.js在中创建SVG映像。但是，我想添加一些不是由svg.js创建的元素，而是一些其他代码。我知道有使用SVG源代码并添加它的.svg()方法，但是我有实际的DOM元素，它已经是SVG的一部分。有办法为这个DOM元素获取一个svg.js对象吗？
浏览 3提问于2016-11-30得票数 0
回答已采纳
1回答
我想要动态导入svg，我无法在我的超文本标记语言页面中显示svg我使用Angular js:我有这样的代码: Directive.js：
angular.module ('SvgMapApp') directive ('svgMap', ['$ compile', function ($ compile) {
return {
restrict: 'A',
templateUrl: 'Scripts/widget.svg',
link: functio
浏览 0提问于2017-12-26得票数 0
我使用PhantomJS + d3在服务器上呈现SVG。我能够返回包含d3创建的SVG的整个页面的HTML，但是如果我只返回SVG，我就会返回null。
var page = require('webpage').create();
page.content = '<html><body></body></html>';
page.includeJs('http://d3js.org/d3.v3.min.js', function() {
var html = page.evaluate(
浏览 2提问于2015-08-22得票数 2
回答已采纳
2回答
使用d3.js进行维恩图布局
、、、、
有关于如何使用d3.js制作维恩图的示例吗？我知道 的事
在D3网站上提供。然而，它们迫使我自己计算圆的x.y位置。我希望只将数据(圆的大小和重叠的大小)提供给函数/图表，它应该会为我做布局。
浏览 0提问于2012-09-22得票数 13
回答已采纳
我有一个svg映像，我使用.html标记将其添加到我的<object>文档中如下：
<object data="./svg/bookmark.svg" type="image/svg+xml" id="bookmark"></object>
然后，我可以将svg放在.css文件中，如下所示：
#bookmark{
position: absolute;
top: 0rem;
left: calc(30rem - 0.1rem);
浏览 2提问于2020-07-01得票数 0
回答已采纳
我的HTML：
<svg id="x"></svg>
<svg id="y"></svg>
<svg id="z"></svg>
我的JS：
const svg = d3.selectAll("svg");
console.log(svg.attr("id"));
日志中的输出：
x
我原以为：
x
y
z
根据svg的id，我想在我的脚本中做一些事情。比如：
svg.attr("id") == 'y' ? 0
浏览 0提问于2018-02-19得票数 0
回答已采纳
纱添加@svgdotjs/svg.js
现在如何使用这个图书馆？
从“@svgdotjs/svg.js”导入*作为SVG
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
不工作
console.log('SVG is ', SVG)
浏览 0提问于2019-03-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
