Tag: d3.js
如何使用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" […]
节点js，NVD3.js不能读取未定义的属性baseval
对于以下数据， historicalBarChart = [ { key: "Cumulative Return", values: [ { "label" : "A" , "value" : 29.765957771107 } , { "label" : "B" , "value" : 0 } , { "label" : "C" , "value" : 32.807804682612 } , { "label" : "D" , "value" : 196.45946739256 } , { "label" : "E" , […]
使用节点js的NVD3图表
我使用nvd3.js图表库创build了简单的离散的BAR图表。 我成功地通过我的browser （ NVD3 chart examples discretebarchart.html ）运行它。现在我正在尝试用NODE.js构build同样的离散条形图。 但是我无法加载我的nodejs服务器中的nvd3库源模块，因为它不在NPM 。 任何人都可以澄清我如何加载NVD3模块，并使用Node js生成NVD3图表？ Node js中没有NVD3模块的包。 作为节点js有包的D3.js d3 = npm install d3; 你对NVD3和Node js的帮助会很棒！
在DOM中从SVG创buildGoogle Maps MarkerImage
我试图在Google Maps中创build一个dynamic的SVG标记（基本上每个标记都具有SVG的文本部分），但是我正在努力处理它的dynamic方面。 正如你可以在下面的代码中看到的，我可以使用静态url中的new google.maps.MarkerImage()创build一个SVG标记。 var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.4269929, -81.7921109), icon: new google.maps.MarkerImage('https://dl.dropboxusercontent.com/u/64084190/test-marker.svg', null, null, null, new google.maps.Size(25, 25)), map: map }); 但我似乎无法得到的google.maps.MarkerImage()采取一个SVG DOM元素的内部HTML作为其第一个参数 – 它总是在寻找一个URL。 <svg id="svg_elem"></svg> function createDynamicSVGMarker(id){ var svg_elem = d3.select('#svg_elem'); svg_elem.append('path') .attr('fill', "#3875D7") .attr('d', "M100 0h-100v100h36.768l13.431 19.876 13.431-19.876h36.37z"); svg_elem.append('text') .attr('transform', "translate(30.979 80)") .attr("fill", "#fff") .attr("font-size", "36") .text(id); var […]
D3树添加和删除节点
我正在使用D3.js创build一个dynamic树形图，它从一个节点开始，然后可以根据需要添加/删除节点。 您也可以编辑节点文本以符合您的标准。 因此，添加节点的工作是完美的，它没有绘制远离深度1的链接……这是令人讨厌的，因为我找不到原因，我尝试了我所想象的一切。 此外，我不能删除一个节点，也尝试了我所知道的一切，几乎无处不在search，但无法find一些示例代码来工作… 这是我的树 正如你所看到的，链接只适用于深度1.此外，它有一个红色的button（REMOVE NODE）和一个绿色的button（ADD NODE） 我真的很难过，因为我一直在研究这两个不能工作6到7个小时的东西…我想我会扔它，并使用简单的input框与一些CSS3技巧，但不是凉… 我用这个完整的代码创build了一个fiddle ，我希望你能帮助我。 http://jsfiddle.net/wt8cd6hh/
