Articles of d3.js

svg图像点播

我有JavaScript代码,当一个人登陆其中一个页面时,dynamic生成svg图像标签。 我使用d3库来帮助制作图像。 唯一的问题是,D3是不完全IE浏览器兼容,我想生成一个.png,JPG,GIF或任何其他图像文件基于SVG文件。 有没有一种已知的方法来做到这一点? 服务器端代码是基于PHP的,我们使用node.js和render.js来处理大量的dynamic内容。

D3JS:如何将SVG文本转换为path?

有没有一种D3.js的方式来将文本元素转换为path元素? 所以当我抓住生成的SVG,我可以保留我的文字形状。

计算字体字形的确切大小

我需要一种方法来查找相对于其边界框的字形的确切大小和位置。 我们使用D3.js创build一个标题,一个较小的字体和一个短的正文文本的SVG。 非常多这个: Lorem ipsum Lorem ipsum dolor Lorem ipsum dolor坐amet, consectetur adipisicing elit, sed做eiusmod tempor incididunt ut labore et dolore magna aliqua 正如在这个例子中,我需要文字左alignment,无论字体大小。 问题是它是alignment的每个行边界框,而不是字形。 这使标题看起来缩进。 如何计算边界框和字形之间的空间,以便我可以正确地alignment文本? 一位同事坐下来,手动测量了英文字体,效果很好。 我们可以在Adobe Illustrator中做到这一点,但我们需要英文,中文和阿拉伯文字体的信息。 手工操作或多或less是不可能的。 我可以想出的唯一解决scheme是在canvas元素中键入每个字符,并映射每个像素以查看字形开始和结束的位置。 我认为最理想的是使用SVG字体path信息来find极值,这样我们就可以得到确切的数字而不是估计值。 我们的估计有一个很大的误差。 有没有办法做到这一点node.js? SVG的一个例子是: <svg viewBox="0,0,1008,1424" height="1052px" width="744px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,150)" class="container"> <g transform="translate(0,205)" class="textContainer"> <g fill="white" font-family="serif" font-size="" class="header"> <text> […]

D3库可以和Electron(Atom shell)一起使用吗?

Electron的网站表示,使用电子制作的应用程序可以访问节点模块。 他们可以访问D3库吗? 如果是这样,怎样才能成立呢?

如何解决TypeError:d3.time是不确定的?

我想用D3.jsparsing数据/时间 为此,我创build了一个JavaScript文件并使用var d3 = require('d3') 。 我使用npm install d3来npm install d3 ,并尝试npm install d3 –save其保存在package.json文件中: { "name": "school", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "browserify": "^13.1.0", "bufferutil": "^1.2.1", "d3": "^4.2.2", "express": "^4.14.0", "guid": "0.0.12", "gulp": "^3.9.1", "react": […]

SVG到canvas与d3.js

有没有人在创buildd3.js可视化文件时尝试使用svgcanvas库? 我已经尝试使用canvg.js和d3.js从android 2.3应用程序webview中将svg转换为canvas,但是当我调用: svg.selectAll(".axis") .data(d3.range(angle.domain()[1])) .enter().append("g") .attr("class", "axis") .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; }) .call(d3.svg.axis() .scale(radius.copy().range([-5, -outerRadius])) .ticks(5) .orient("left")) .append("text") .attr("y", function (d) { if (window.innerWidth < 455){ console.log("innerWidth less than 455: ",window.innerWidth); return -(window.innerHeight * .33); } else{ console.log("innerWidth greater than 455: ",window.innerWidth); return -(window.innerHeight * […]

D3js:如何生成独立的SVG文件? (的NodeJS)

给定一个D3js代码 , 如 : function () { var svg = window.d3.select("body") .append("svg") .attr("width", 100) .attr("height", 100); svg.append("rect") .attr("x", 10) .attr("y", 10) .attr("width", 80) .attr("height", 80) .style("fill", "orange"); } 如何使用我的D3js代码和NodeJS生成正确的独立* .svg文件?

SVG到PNG服务器端 – 使用node.js

我试图按照这个教程将d3.js SVG Vis转换为PNG服务器端(使用Node.js) http://eng.wealthfront.com/2011/12/converting-dynamic-svg-to- PNG-with.html 链接到完整的代码: https : //gist.github.com/1509145 但是,每当我尝试请求加载我的页面时,我总是收到此错误 /Users/me/Node/node_modules/jsdom/lib/jsdom.js:171 features = JSON.parse(JSON.stringify(window.document.implementation._fea ^ TypeError: Cannot read property 'implementation' of undefined at exports.env.exports.jsdom.env.processHTML (/Users/dereklo/Node/node_modules/jsdom/lib/jsdom.js:171:59) at Object.exports.env.exports.jsdom.env (/Users/dereklo/Node/node_modules/jsdom/lib/jsdom.js:262:5) at Server.<anonymous> (/Users/dereklo/Node/Pie/pie_serv.js:26:9) at Server.EventEmitter.emit (events.js:91:17) at HTTPParser.parser.onIncoming (http.js:1785:12) at HTTPParser.parserOnHeadersComplete [as onHeadersComplete] (http.js:111:23) at Socket.socket.ondata (http. 有人知道为什么这可能是? 我已经安装了jsdom模块,所以我不知道是什么原因导致这些问题…在此先感谢。 编辑 这是我用来实现node.js服务器的代码。 我最近的问题是在这个源下面… var http = require('http'), url […]