Articles of d3.js

我如何运行一个JavaScript作为node.js脚本没有DOM?

https://github.com/jasondavies/d3-cloud是使用D3库的javascript中的词云。 这是一个交互式演示 。 演示使用d3-cloud脚本在HTML中生成SVG。 我想在服务器端使用它,并获取node.js生成一个SVG文件,并将其保存到磁盘,只要我更新我的数据,而不是将D3库加载到浏览器并呈现在那里。 有没有办法做到这一点? 我可以使用似乎依赖HTML DOM而不使用DOM的库吗? 我是node.js的新手

将Expressvariables传递给客户端JavaScript

最终,我试图从节点服务器传递JSON数据以供D3在客户端使用。 这是我的index.js var express = require('express'); var router = express.Router(); var portmix = require('../data/holdings.json'); /* GET individual portfolio page. */ router.get('/portfolio/:portcode', function(req, res) { var porthold = []; for(var i in portmix){ if(portmix[i].PortfolioBaseCode === req.params.portcode){ porthold.push(portmix[i]) }} res.render('index', { pagetype: 'single_portfolio', holdings: porthold[0] }); }); module.exports = router; 这是ejs文件: <div class="portfolio"> <h2><%= holdings.ReportHeading1 %></h2> <ul> […]

在d3的指导下,如何通过点击来改变节点的形状?

我在d3中有一个强制定向图,并希望能够点击圆形节点并将它们变成矩形。 然后,如果我点击一个矩形,我想它恢复到一个圆圈。 我已经看过这个和有关的问题,但我认为他们是D3的早期版本,不为我工作。 我可以做到这一点,我的圈子的大小和颜色会改变点击,并与下面的代码,我可以用一个黑色的矩形replace圆节点,但它不附加在图上,只是一个黑色的方块SVG。 node.on("click", function(d,i) { var size = 20; d3.select(this).remove(); svg.append("rect") .attr("x", dx) .attr("y", dy) .attr("height", size) .attr("width", size) .style("fill", function(d) { return color( d.group); }); }) 任何人都可以告诉我我失踪了吗? 我怀疑rect没有被附加到graphics数据上,但是我没有足够的熟悉d3来理解我应该改变什么。 谢谢。

Angular.js / D3.js / Node.js之间有什么区别和相似点

我正在尝试探索JavaScript框架,我碰到这些stream行的框架 Angular.js Node.js的 D3.js 我试图谷歌,但发现很less比较。 那么谁能解释他们之间的实际区别和相似之处? 谢谢,Chirag Visavadia

如何使用nodejs将svg节点保存到文件中?

我正在使用d3通过一个小帮手包: https : //www.npmjs.com/package/d3-node 我使用d3-node创build了我的svg文件,下面是代码。 const D3Node = require('d3-node') var d3n = new D3Node() var svg = d3n.createSVG() .style("width","1920px") .style("height","1080px") .attr("preserveAspectRatio","true") .html(firstTemplate) .append("myCustomTag") 在此之后,我不知道如何保存输出。 主要的问题是在myCustomTag 。 console.log(d3n.d3Element.select("svg").node().innerHTML) 这行应该输出我的SVG,它的确如此,除了myCustomTag变成mycustomtag和我的SVG被损坏。 我试过select("svg").node().outerHTML , select("svg").html() ,innerText,我什么也找不到。 在这种情况下,我不能使用innerHTML,有没有办法直接从d3variables存储svg文件?

带有JSON Web服务的D3图表

我正在尝试从本教程中制作以下条形图 。 本教程使用TSV文件,但是我已经修改了JSON的代码。 我已经检查了我创build的Node / Express服务中的端点http://localhost:3000/graphs/data确实返回了JSON,这可以在下面看到。 也包括适当的D3库。 检查了所有这些之后,我无法得到图表来呈现。 目标是在x轴上有route并在y轴上count 。 任何build议将不胜感激。 JSON响应 : [{"route":"9","count":273},{"route":"49","count":242},{"route":"151","count":221},{"route":"8","count":220},{"route":"3","count":213},{"route":"82","count":209},{"route":"79","count":206},{"route":"N5","count":206},{"route":"62","count":206},{"route":"4","count":202}] 条形图代码 <script> var margin = {top: 40, right: 20, bottom: 30, left: 40}, width = 960 – margin.left – margin.right, height = 500 – margin.top – margin.bottom; var formatPercent = d3.format(".0%"); var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = […]

在node.js中如何使用客户端库?

我是node.js的新手,刚刚发现了npm,这是一个非常方便的工具。 不过,我注意到我以前在客户端JavaScript编程中使用过的很多库,例如jquery和d3,都可以使用npm进行安装。 将这些库安装为节点模块似乎很奇怪,因为我不明白如何在节点中使用像d3这样的对数据可视化有用的东西。 难道仅仅因为npm是一种便捷的下载JavaScript代码的方法,即使这些库不能与节点一起使用吗?

如何在一个节点上使用requirejs,jquery和d3 express webserver

有一段时间我一直在挣扎,但我没有取得任何进展。 我总是遇到意想不到的事情。 我想支持node.js(express)中的浏览器代码,它使用require.js,jquery和d3.js基于http请求input参数构build图(svg) 我遇到的问题是,一旦requirejs被初始化,它将始终返回相同的jquery和d3.v2模块,并且这些都将(针对每个客户端http请求)开始在同一个DOM(jsdom)实例上执行它们的操作。 最终的结果是graphics混合在一起。 一旦require.js就足够简单了,但是这将使我更新所有现有的浏览器代码,大量使用require.js模块和依赖项pipe理 所有关于如何解决这个问题的技巧,或者指示代码的指针,都会受到热烈的赞赏! 谢谢 彼得

使用d3和node.js / EJS呈现

我正在尝试使用node.js和D3在Cloud 9上构build一个简单的示例,但在绘制图表时出现了一些问题。 我在chart.ejs文件中有一个简单的视图,并试图做一个包括d3.v3.js和d3.layout.js文件。 但是,当达到d3包含文件时,我总是收到Uncaught Syntax Error: Unexpected token < 。 所以有几个问题: 有没有人能够使用D3与EJS? 我见过一些Jade的例子,但不是EJS。 正在使用<script>标签适当的方式来使用D3与EJS渲染? 任何使用D3和node.js的好例子? 将不胜感激任何想法/意见? 免责声明:我对node.js和D3比较新,所以我可能需要一些基本的方向。 编辑:这是chart.ejs代码。 这与脚本包括有关。 当我尝试像下面这样在本地包含时,会抛出意外的令牌错误。 但是当我提到包含从下载位置,似乎工作。 这可能是一个C9的事情,但不知道。 奇怪的是,如果有人在C9中跑过这个: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body> <script type="text/javascript"> // Your beautiful D3 code will go here </script> </body> </html>

使用通用键而不是元素名称作为键将xml转换为json

而不是元素名称作为JSON中的键,我需要生成更多的通用键JSON,描述节点types。 d3.js使用这些types的json文件来生成可视化文件。 使用node.js模块xml2js,我parsing了xml文档的简化版本后得到这个: { "XML": { "$": { "xmlns": "http://example.org/example/2011/1" }, "Building": [ { "BuildingID": [ { "$": { "id": "BuildingAudit" } } ], "ProjectStatus": [ { "Date": [ "2013-07-16" ], "EventType": [ "audit" ] } ] }, { "BuildingID": [ { "$": { "id": "BuildingRetrofit" } } ], "ProjectStatus": [ { "Date": [ "2013-08-06" […]