草庐IT

javascript - Raphael 沿着路径的 SVG 动画

我有一个关于SVG动画的有趣问题。我正在使用Raphael沿着圆形路径制作动画obj=canvas.circle(x,y,size);path=canvas.circlePath(x,y,radius);path=canvas.path(path);//generatepathfrompathvaluestringobj.animateAlong(path,rate,false);circlePath方法是我自己创建的,用于生成SVG路径符号中的圆路径:Raphael.fn.circlePath=function(x,y,r){vars="M"+x+","+(y-r)+"A"+r+",

javascript - 缩放 D3 强制布局链接标记上的箭头

我在d3力定向图中有以下代码,我试图根据值(从1-3)改变链接及其关联箭头的大小。笔划粗细确实随值而变化,但箭头不会停​​留在正确的位置。当笔划粗细从1变为3时,它往往会从末端向后移动。关于如何在更改笔划值时使箭头(标记)正确对齐有什么想法吗?非常感谢!varlink=vis.selectAll("line.link").data(json.links).enter().append("svg:line").attr("class","link").style("stroke-width",function(d){returnMath.sqrt(d.value);}).attr("x1

javascript - D3 平移缩放溢出

我想知道您是否可以帮助我使用以下fiddle中的以下D3js缩放和平移功能:http://jsfiddle.net/moosejaw/nUF6X/5/我希望代码(虽然不是很好)是直截了当的。我有一个图表,其中包含总染色体长度乘以总染色体长度。刻度值是每条染色体的个体长度(总长度)。刻度线被格式化为染色体的名称(以便最终用户看起来好看)。我遇到的问题是:x轴和y轴标签延伸到图形区域之外。当我没有明确提供刻度值时,标签会“消失”。见:varyAxis=d3.svg.axis().scale(y).orient("left").tickValues(tickValues).tickForma

javascript - 转换转换的 d3 转换不适用于 DIV

为什么转换属性不适用于D3中的DIV?它适用于任何svg元素,但不适用于“div”。任何替代解决方案?不工作d3.select("div").transition().style("transform","translate(0px,-500px)");工作d3.select("circle").transition().style("transform","translate(0px,-500px)"); 最佳答案 如前所述,d3不支持开箱即用的HTML元素的CSS3转换转换。您必须创建一个自定义字符串插值器来为您做这件事。注意:

javascript - 使用Web Worker和D3.js异步生成图?

我目前正在解决一个问题,该问题要求我的Web应用程序生成一个代表大约50k到60k数据点的图表。它加载速度相当快(约6秒),但我想知道是否可以使用D3.js在WebWorker中生成图形,然后将SVG传回以加载到页面中。 最佳答案 WebWorker没有DOM访问权限,因此您在这方面所能做的就是构建可用于快速创建DOM的东西。例如,工作人员可以处理数据集并进行所有繁重的计算,然后将结果作为一组数组传回。 关于javascript-使用WebWorker和D3.js异步生成图?,我们在St

javascript - D3 如何根据下拉框选择更改数据集

我正在尝试根据下拉框选择更新/更改矩形的数据。我尝试了各种方法,但我对D3调度功能的理解还不够深入。如果有人可以更新这段代码,我将不胜感激,这样我就可以看到它在实践中是如何工作的。我有3个带值的数据集,我只是想根据用户在菜单栏中选择的内容更新矩形尺寸。非常感谢,MenuBardata1data2data3varw=100,h=100;varcolor=d3.scale.ordinal().range(["#1459D9","#daa520"]);vards1=[[{x:0,y:12}],[{x:0,y:45}]];vards2=[[{x:0,y:72}],[{x:0,y:28}]];v

javascript - 在 D3 强制布局中,在根节点周围均匀地间隔节点

我刚刚开始使用D3,所以如果有人对我可能没有正确/优化地做的事情有任何一般性建议,请告诉我:)我正在尝试创建一个力导向图,其中节点围绕中心根节点(以较大的尺寸标注)均匀分布(或足够接近)。这是我尝试实现的布局示例(我知道它不会每次都一样):我有下图:varwidth=$("#theVizness").width(),height=$("#theVizness").height();varcolor=d3.scale.ordinal().range(["#ff0000","#fff000","#ff4900"]);varforce=d3.layout.force().charge(-12

javascript - 在带有 IE 的 JavaScript 中使用 XMLSerializer 时,SVG 标记上不需要的 namespace

我正在尝试使用JavaScriptDOMAPI的XMLSerializer将SVG元素转换为其代表性标记。这是用于创建元素并将其序列化的基本代码:varel=document.createElementNS('http://www.w3.org/2000/svg','svg');el.setAttribute('xmlns','http://www.w3.org/2000/svg');el.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');varmarkup=(newXMLSerializer()).serialize

javascript - 使用 safari 在 Canvas 中绘制包含 html 的 svg

我正在尝试为网站创建一些动态创建页面的缩略图,我找到了一个解决方案,方法是在svg中添加html,然后我在Canvas内的图像上绘制图像,然后在绘制图像后调整大小.此解决方案适用于firefox和chrome,但不适用于safari,svg似乎没有绘制我只是得到一个空白页面。即使我trycatch并且我在网上找不到解决方案,我也没有收到任何错误。我的html只是一个带有Canvas的基本测试页面,我试图在头部添加一个meta标签但是也没用。这是我写的代码:varcanvas=document.getElementById('canvasTest'),context=canvas.get

javascript - 计算 SVG 文本的垂直高度

我有一个字符串数组。说,['Jan11','Feb11']我正在用这些字符串创建一个垂直文本Jan11渲染svg后,我发现文本的高度为36px。现在有没有一种方法可以在给定字体大小的情况下计算预先呈现的文本的高度? 最佳答案 您可以使用getBBox方法来计算SVG节点的尺寸。vartextNode=document.getElementsByTagName('text'),bbox=textNode.getBBox();//bboxnowhavex,y,widthandheightproperties