我试图在高图表中创建一个堆叠的列图，x轴标签是SVG-图像，如下所示：
我已经让它处理每个标签上的单个数据点(即非堆叠数据)，但一旦我将输入数据更改为数组，数据就停止呈现。这个“工作”：
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
var data20
浏览 0提问于2021-10-21得票数 0
回答已采纳
我正在为我在d3.js datavizualisation中使用的数据的每个数据点绘制几个元素。这将根据数据创建一个简单的项列表。它的产出如下：
<div>
<p>[Title of datapoint 1]</p>
<svg>[SVG using datapoint 1]</svg>
</div>
<div>
<p>[Title of datapoint 2]</p>
<svg>[SVG using datapoint 2]</svg>
<
浏览 2提问于2020-01-18得票数 1
回答已采纳
1回答
据我所知，d3.js主要用于SVG，而不是HTML5 5的画布。SVG和Canvas的优缺点是明确的，并且已经讨论过了。现在，我发现可以在d3.js中使用画布，也可以与SVG结合使用。主要原因应该是为大型数据集获得更好的性能(就像cubism.js用于实时数据可视化一样)。我的问题是:当我在SVG上使用画布来获得更好的性能时，我仍然有可能进行交互吗？我知道画布本身允许操作，但它比SVG更难实现。所以，当我使用D3.jsCanvas方法时，我可以维护SVG的交互吗？
浏览 4提问于2014-03-13得票数 1
回答已采纳
下面的html代码是创建svg元素的最小示例，该元素显示从数据数组生成的简单rough.js多边形。我想在nodejs程序中使用js代码，该程序生成相同的svg并将其保存到文件中。实现这一目标的最简单方法是什么？ <html>
<head>
<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>
</head>
<body>
<script>
var svg = document.cre
浏览 61提问于2020-07-29得票数 0
回答已采纳
2回答
如何在一个页面中使用svg图像数据制作克隆标记对象。没有很多的方法到服务器。目标页面样本
<!DOCTYPE html>
...
<object id="tg0" data="graph.svg" type="image/svg+xml" some_my_value="234"></object>
<object id="tg1" data="graph.svg" type="image/svg+xml" some_my_value="
浏览 4提问于2015-05-06得票数 4
回答已采纳
1回答
我尝试在相同的页面上添加多个D3图，即使用CSV或JSON格式的不同数据的饼图、条形图和树布局。但我无法在同一页上实现所有这3幅图。当我在同一个页面上链接超过一个布局时，我会得到一个空白页面。
我试图使用以下HTML和JS将每个图表添加到不同的div中
<div id="piediv"></div>
<div id="bardiv"></div>
<div id="treediv"></div>
JS
var svg = d3.select("#piediv"
浏览 2提问于2016-11-21得票数 3
回答已采纳
我有一个带有外部JavaScript模块的HTML页面
<script type="text/javascript" src="js/js.js"></script>
和一个外部SVG地图"img/map.svg“。
我需要在地图上创建可点击的对象，然后调用在"js/js.js“中定义的全局JavaScript函数myJSFunction。此函数将修改HTML页面的标题和内容，隐藏SVG映射，并使用一些数据显示表。我该怎么做？在svg代码中设置onclick事件的天真尝试如下：
<g
id="g17
浏览 2提问于2019-12-10得票数 0
回答已采纳
我的svg中有一个use元素，如
<use x="47.46" y="44.64" cx="48" cy="45" id="9zh7" href="#msi_plane" class="markerpoint"></use>
我有一个在悬停上转换.markerpoint类元素的悬停函数：-
$('.markerpoint').hover(
function() {
var mySnapElement = Snap(this)
浏览 5提问于2021-11-13得票数 1
回答已采纳
给定运行的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
回答已采纳
5回答
我有一个非常简单的HTML文件，在该文件中，我希望根据通过AJAX调用检索的数据绘制SVG。
我应该等到通过将我的代码封装在document.onload = function() { ... }块中来完全加载文档，或者我是否可以确保在执行JS代码时文档已经完全加载，因为我的JS代码是在HTML文件的末尾加载的？
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
浏览 6提问于2014-03-16得票数 0
回答已采纳
使用一些D3js代码和地图数据中投影的topojson数据，我如何返回地理坐标？这样的事情：
var svg = d3.select("#viz").append("svg:svg")
.attr("width", 320)
.attr("height", 200)
.on("mousedown", mousedown)
.on("click", mouselocation);
如何从单击D3js地图可视化中获取地理坐标?
链接到演示欢迎。
编辑：相关演示列表：
...但我们什么D3j
浏览 6提问于2012-06-04得票数 8
回答已采纳
1回答
可以在php端使用svg原始数据(从fabric js获取)生成pdf吗？
我搜索了一下，找到了这个例子：
但是它除了svg图像而不是svg原始数据，那么如何在服务器端用php生成svg原始数据的pdf呢？
浏览 4提问于2017-11-23得票数 0
我正在尝试用新的数据更新我的d3js轮廓图。我使用set区间方法来创建新的随机数据，并希望生成新的轮廓/动画当前轮廓到新的位置，如果这是有意义的。目前，代码为第一个数据创建等高线图，不使用不同的数据更新等高线。理想情况下，我希望根据我所提供的数据，将轮廓从一种状态平稳地过渡到另一种状态。
values = []
function solve() {
var svg = d3.select('svg'),
svgWidth = +svg.attr('width'),
n = 31, // data width
m = 31 //
浏览 4提问于2020-06-22得票数 2
回答已采纳
我有许多具有相同season-list类的div，每个div都有一个data-episode-count数据属性。如果属性值大于6，我需要能够在单击时获取属性并使用该值隐藏js-show-more-trigger。我目前正在遍历所有season-list类，但不确定如何从div获取数据属性：
<div class="js-season-list-item" id="season-5" style="display: block;">
<div class="season-list" data-episode
浏览 1提问于2018-03-21得票数 1
我有一个基于散乱的点数据并使用d3.js中的contourDensity()的轮廓线的图。当更新数据集时，我希望在状态之间平滑地过渡轮廓线。我知道使用单行可以做到这一点，但是如何将其应用于contourDensity()创建的路径呢
绘图示例：
var data = [];
var svg = d3.select( 'svg' );
var width = parseInt( svg.attr( 'width' ) );
var height = parseInt( svg.attr( 'height' ) );
function upd
浏览 4提问于2017-04-23得票数 1
2回答
我试图用我从这个API带来的GEOJSON数据在SVG中绘制一张地图，SVG路径充满了数据，然而，SVG是空白的，执行下面的代码可以看到。注意document.write，数据被正确返回。 var svg = d3.select("svg")
d3.json('https://api.mocki.io/v1/d214eb47')
.then(data => {
svg.append('g')
.selectAll('path')
.data(da
浏览 20提问于2021-03-25得票数 2
回答已采纳
我需要从另一个js文件中添加一个数组，因为另一个js文件中的表数据源是这样的。我已经有了一个数组，并且它已经被映射了，我只需要在另一个js文件中调用它。
contactor.js
import React from "react";
import Wrapper from "./style";
import { Table, Divider, Tag } from 'antd';
import 'antd/dist/antd.css';
const CatagoryMapping = (props) => {
co
浏览 5提问于2022-11-23得票数 0
1回答
我对d3.js非常陌生，我正在根据d3.js中的json数据创建一个线条图。当json数据位于html文件中时，代码运行良好，但我希望将数据从html中提取出来，并将数据作为json文件引用。示例index.html如下所示：
<!DOCTYPE html>
<html lang="en">
<body>
<svg id="visualisation" width="1000" height="500"></svg>
&l
浏览 3提问于2016-04-24得票数 3
回答已采纳
嗨，我正在使用opentype.js成功地获取svg路径数据，但是在使用svg.js来呈现路径时遇到了困难：
下面是我的代码，它当前创建了一个带有空组<g></g>的svg，在这里我期望这个组包装我的路径数据。
我在另一篇文章中看到，我应该使用SVG.adopt() (正如我在下面所做的那样)，但没有效果。提前感谢
const svg = new SVG().addTo('body').attr({
viewBox: '0 0 100 100'
})
const createShape = (font,content) =>
浏览 2提问于2022-02-24得票数 1
1回答
我正在从一个办公插件( D3JS -js)中的excel数据生成一个svg。现在，我在将SVG添加到excel表格中时遇到了麻烦。 这将与办公插件一起工作吗？
浏览 530提问于2021-09-05得票数 0
在使用sw预缓存生成服务worker.Below时，我可以排除一些urls吗？
module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist',
root: 'dist/',
staticFileGlobs: [
'dist/index.html',
'dist/**.js',
'dist/**.css',
'dist/**.ico',
'dist/assets/images/
浏览 1提问于2018-03-02得票数 9
回答已采纳
我对包含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
回答已采纳
这个问题构建了。
使用d3.js/dc.js，我有三个(或更多)图表。它们都有相同的x轴(一个日期序列)，因此任何图表上的第n个数据点将与其他图表的x轴上的第n个数据点完全对应。
当用户单击一个图表中的点点时，我需要从其他2+图表的同一点获取"y“数据，并从其他图表返回一个数组或对象或字符串，其中包含图表in /y-数据，如下所示：
{"chart1":"30","chart2":"50","chart3":"10"}
以下是从Gerardo对上述问题的回答中借用的一个例子.我将如何修改Ge
浏览 1提问于2017-02-11得票数 2
回答已采纳
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
回答已采纳
我正在开发一个使用SVG & JS的web应用程序。事情进行得很顺利，但我对数据处理有点困惑。
用户创建的对象的数据会动态附加到SVG根目录。此SVG数据存储在哪里&如何存储，以及如何访问它？我之所以要读它，是因为我想把这个SVG数据转换成png画布(使用Google的)，最后把它转换成HTML5图像，存储在我们的db中以备参考。
任何指导都将不胜感激。
浏览 1提问于2011-03-05得票数 11
1回答
我使用的是D3.js，我试图在svg中创建一个svg。例如，我的第一个svg是这样的：
var svg = d3.selectAll('body')
.append('svg')
.attr('width',500)
.attr('height',500);
然后，我想在第一个svg中创建第二个svg，我希望它出现在我的第一个svg的右上角。那件事怎么可能？我考虑了第二个svg的宽度= 100和高度= 100的属性。这个问题的原因是，我使用了D3.js中的力布局，根据数据的输入，它实际上是很
浏览 1提问于2017-04-04得票数 0
回答已采纳
我正在将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
我正在尝试将D3.js集成到一个Mean.js crud模块中。如果我删除mean.js创建的标准列表控制器，并将其替换为示例控制器中的样本硬编码数据，则这里的示例工作得很好。
我不知道如何使用D3指令集成来自数据库的实际数据。我应该注入模块服务吗？
顺便说一句，我使用的是0.4.2版本的Mean.js
这是标准的Meanjs列表控制器。
(function () {
'use strict';
angular
.module('charts')
.controller('ChartsListController', ChartsList
浏览 0提问于2016-08-16得票数 0
例如，我们喜欢将jQuery模板与SVG一起使用，以显示具有良好风格的价格的产品。
假设我们有一个表示复杂布局的SVG。有没有可能将<input>标记嵌套在SVG中，同时仍然在HTML5中工作？在SVG中有没有其他方法可以从用户输入数据，比如用Knockout.js提取数据？
我知道您可以在背景图形的意义上使用SVG，并修改位置以使表单域对齐。如果可能的话，我对让输入语句通过SVG流动非常感兴趣。
浏览 0提问于2011-05-12得票数 33
回答已采纳
我有一个代码，它只在从服务器获取某些数据并设置变量之后才呈现。当使用svg.js时，它使用SVG.AddTo("#someID")，但是由于有条件的呈现，包含ID的div尚未呈现。如何将SVG.AddTo延迟到呈现了div并且id存在之后？下面是代码(一些内容已被删除，例如服务器获取)：
import React, { useEffect, useState, useRef } from "react";
import {
CCol,
CRow,
} from "@coreui/react";
import * as SVG
浏览 9提问于2022-11-18得票数 0
1回答
我必须遍历由[{ title: '', desc: '', svg: '' }, ...]组成的对象数组。因为SVG代码太大，我不想用大量的SVG代码来干扰我的.pug文件。
有什么可以让我从另一个JS文件导入此Array并使用它，而不需要在其中输出/生成数组来编译html，就像PUG中的普通inlie JS一样：
someMagicImport data.js
each feature in data.features
li= feature.title
数据文件：data.js
const features = [
{ title:
浏览 4提问于2021-07-17得票数 0
回答已采纳
我正在尝试获取div.I的svg表示。我正在使用此的jQuery SVG
我在页面加载时这样做：
var pad = null;
$('.MyDiv').svg({onLoad: function(svg) {
pad = svg;
}
});
在div中的每个更改中，我都是这样做的：
var svg = $('.MyDiv').svg('get');
alert(svg.text);
但是我在alert中得到了一些JS代码。我试着提醒svg.toSVG()，但我得到的结果是：
警报中的<sv
浏览 0提问于2012-07-05得票数 0
回答已采纳
1回答
我正在查阅d3.js文档，上面写着：
D3帮助您使用HTML、SVG和CSS将数据带入生活。
示例部分给出了很好的可视化，但是我想澄清它是只使用SVG还是HTML 5画布？
我打算做一个高度交互式，大数据驱动，动画丰富的可视化，并考虑d3.js。
是否有人能澄清或提供我应该使用的js可视化库的替代建议？
浏览 1提问于2012-07-06得票数 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
回答已采纳
给定数量的div，每个div的数据属性为data-episode-count=，每个div都有一个值，该值基于每个容器中的插集数。如果当前选择的容器(显示样式:块)中的插集数小于6，我就很难用类show-more隐藏div。我不知道如何检查数据属性值，如果它小于6，则将显示按钮的div样式设置为none。在series-seasons-list-wrap类中有多个季节，但是为了这个问题，我已经将它简化为一个。
<div class="series-seasons-list-wrap">
<div class="js-season-list-ite
浏览 1提问于2018-03-21得票数 0
1回答
我是一个初学者在编码的世界，并试图做一些HTML抓取。我已经在一些早期的项目中取得了成功，但我目前的项目不起作用。
这个问题与这个站点有关：我想从这个站点(和类似的站点)中提取数据。
然而，当我试图提取数据，如层，价格等，我遇到了一个问题。我的代码如下：
from bs4 import BeautifulSoup as BS
import lxml
import urllib2
from pprint import pprint
##
site="http://console.worldoftanks.com/encyclopedia/vehicles/usa/T1_Cunning
浏览 6提问于2016-05-09得票数 2
回答已采纳
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
尝试使用d3.js创建一个简单的条形图。我还提供了一个按钮来创建随机数据，用作svg条形图的数据集。但是，svg中的条形图仅为第一个数据集呈现。即使我更改了数据集的值，条形图仍然保持不变。需要帮助。 我检查了道具，看看它们是否有变化。道具正在更新，但没有改变图表中的条形图。 App.js文件： class App extends Component {
constructor(props){
super(props)
this.state={
dataSet: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
浏览 25提问于2019-01-11得票数 3
回答已采纳
1回答
好的，我主要是用Laravel & Vue js构建一个web应用程序。我尝试使用，但导出的svg显示为空白。
在这方面，在继续之前，我开始怀疑这是否真的值得，而且我也不确定。
所以我的问题是，真正的区别是什么？
让我们假设我们不能使用图标字体，因为我们希望有多色的svgs。
svgs是否值得尝试使用一个包将svg合并成一个svg，然后再使用它，还是它与http/2?Considering文件大小和数据使用没有真正的区别，是否值得尝试使用雪碧来最小化这个方面而不是多个外部svg files?Inlining svg也是一种选择，但这会显着地增加的大小。
所以我想知道..。有没有人尝试过
浏览 7提问于2020-05-12得票数 4
1回答
在尝试使用D3.js创建多个svg元素时，我使用了以下代码，该代码可以在给定此数据格式的情况下工作：
// Data that works:
var data= [
{x:1, y:2, z:5},
{x:3, y:5, z:10},
{x:8, y:9, z:11}
]
// Make svg elements
var svg = d3.select('body').selectAll('svg')
.data(data)
.e
浏览 1提问于2012-05-31得票数 2
回答已采纳
我有一个Vue.js组件，它动态地构建svg元素的内容。为了简单起见，假设内容是<circle cx="50" cy="50" r="60" />
该组件通过操作一个名为svg的数据变量来做到这一点。
data() {
return {
svg: '<circle cx="50" cy="50" r="60" />',
foobar: 'foobar',
};
},
我在父组件中有一些特定的svg
浏览 6提问于2019-12-04得票数 0
回答已采纳
我试图让SVG上的一个单击事件使用knockout.js触发：
<img id="the-image" src="img/image.svg" data-bind="????????" />
SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="100" fill="#707070"
width="20"
hei
浏览 1提问于2014-05-06得票数 3
回答已采纳
由于我的问题的主题没有在任何其他线程中得到详细的回答，在官方的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
回答已采纳
我成功地将png图像转换为数据uri，然后将该数据uri注入到html元素中。
//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
$("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
// data:[<mime type>][;charset=<chars
浏览 0提问于2015-03-01得票数 1
1回答
我看过几十个类似的话题，但似乎没有一个管用！我的眼睛在出血！
这有点独一无二。我正在使用Morris.js创建折线图。它输出一个SVG，然后输出一堆circle元素。我所要做的就是将我自己的工具提示附加到圆圈中(我不想使用他们的)。但是工具提示不会追加，也不会在前面插入，也不会预先添加。我之所以阅读，是因为SVG在DOM中不被识别为HTML。我已经装好jquery.svg.js了。
js
$(document).ready(function(){
$('#firstTooltip').appendTo('<circle />');
});
h
浏览 2提问于2014-04-02得票数 0
我在我的Node.js应用程序中使用Highcharts nodejs导出服务器模块。
我希望获得SVG字符串形式的响应，而不是在服务器上生成SVG文件。是否可以获得SVG字符串作为响应。
我正在使用最新的Highcharts Node.js导出服务器模块。我可以在res.data中获得base64编码的数据，但是我看不到任何方法来获得SVG字符串作为响应。
我使用下面的代码片段来调用导出器模块：
exporter.initPool();
exporter.export(exportSettings, function (err, res) {
exporter.killPool();
pro
浏览 2提问于2019-05-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
