Articles of d3.js

通过HTML加载D3模块与节点需求语句

问题 执行以下代码会根据模块的加载位置而产生不同的结果。 d3.tsv("data.tsv", function(error, data) { if (error) throw error; console.log(data); } 当D3库加载到html文件中时,使用下面的脚本标签 <script src="node_modules/d3/build/d3.js" type="text/javascript"></script> 在上面的例子中,data data.tsv中的data按照预期被导入到variablesdata中。 当从节点terminal(REPL)或脚本导入库时,如下所示, data的内容最终为三个对象数组,其中所有对象都包含Error: connect ECONNREFUSED 127.0.0.1:80 。 let d3 = require('d3'); d3.tsv("data.tsv", function(error, data) { if (error) throw error; console.log(data); } 放弃 这是一个电子应用程序,问题发生在渲染过程而不是主要过程。 D3正被用来组件UI。 浏览器安全性如下,解释如何通过本地托pipe文件(如使用本地Web服务器)或使用Electron API 访问本地文件轻松解决此问题。 题 如前所述,D3文档小组解释说, 浏览器安全限制了文件的访问 ,但是这两个import之间的function差异是什么,为什么它只能以一种方式工作,而不是另一种?

D3请求错误地组装path和使用错误的主机

我通过npm start 10.0.1.18:3000运行服务器。 我正在做: import * as request from 'd3-request'; const myPath = './data/my_file.json'; request.json(myPath, (error,data)=>console.log(error,data)); 这是失败的,一个错误: "Failed to execute 'fetch' on 'Window': Failed to parse URL from //localhost:80./data/my_file.json ” 好像有两个问题: 它正在寻找localhost:80而不是10.0.1.18:3000 只是把path连接起来,包括领先的“。” 而不是正确地解释它。

使用D3和C3绘制一个简单的图表

我正在使用node.js(我不知道在这种情况下是否重要)。 我想用d3和c3绘制一个简单的条形图。 我的html如下所示。 没有输出。 我在这里做错了什么? var chart = c3.generate({ data:{ columns:[ ['data1', 90, 30] ], type: 'bar' } }); <script src="https://d3js.org/d3.v4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script> <head> <title></title> </head> <body> <div id="chart"></div> </body>

要求“d3-select-multi”作为节点模块不工作

我通过npm安装了d3,并直接要求在我的脚本中(出于某种原因) 所以: npm install d3 接着 var d3 = require("d3"); 工作正常。 现在的问题是,我需要“d3select多”模块。 我也通过npm安装它 npm install d3-selection-multi 在d3-Doku我读,你可能需要不同的模块,如: var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection")); 我改变了我的需要,这将是有标准的D3包(工作已经上面),并添加D3select多。 var d3 = Object.assign({}, require("d3"), require("d3-selection-multi")); 那不行。 所以我通过打印出结果对象来testing它: console.log(d3) 结果是正确的: {version: "4.11.0", bisect: ƒ, bisectRight: ƒ, bisectLeft: ƒ, ascending: ƒ, …} 但是“d3-selection-multi”模块不存在。 我可以看到,因为它不能识别d3.selectAll().styles作为函数。 我尝试了以下:而不是 var d3 = Object.assign({}, require("d3"), require("d3-selection-multi")); […]

d3.js节点和链接

我试图让节点连接到线,并能拖动时移动。 我知道我需要一个鼠标,鼠标,鼠标和鼠标。 但是,我不知道如何使用d3.js来做到这一点,因为我从来没有做过。 这是我迄今为止所做的。 window.onload = function () { var drawOptions = { // dimensions of svg element SVG_WIDTH: 800, SVG_HEIGHT: 600, SHRINK_FACTOR: 100, BIG_CIRCLE: 200 }; // 1. array of objects representing the network // each object is a province or state // preliminary version – only 2 provinces, 1 state var provincesAndStates = […]

可视化stream速非常高的数据

我正在使用Twitter Storm进行stream式高速/大数据的实时分析。 现在我不知道如何有效地在浏览器上可视化数据。 我的意思是Storm正在处理的速度真的非常快,风暴正在集群上工作。 我刚刚遇到了Node.js和D3.js的组合来解决这个显示问题。 由于我不是从UI或JavaScript世界,所以只是想知道我是否正确的方向? 有人能简单地解释一下这个组合能给我带来什么吗?

如何使用代码删除D3树节点?

我有这个小提琴http://jsfiddle.net/Deansmithok/3HeU9/ 我想删除一个节点(和它的链接) 在我最后的尝试中: 我已经保存了DOM中的d.id作为$('#inpSelidTAUsers')。val()然后试着这个代码… svgGroup.selectAll('path.link').filter(function(d, i) { if (d.target.id == $('#inpSelidTAUsers').val() ) return true; else return false; }).remove(); svgGroup.selectAll('g.node').data(nodes).filter(function(d, i) { if (d.id == $('#inpSelidTAUsers').val()) return true; else return false; }).remove(); 此代码确实会删除屏幕上的节点和链接。 但是如果我调用DrawItAll(root),那么节点RE-APPEARS。 请告诉我如何删除节点,使它保持GONE 🙂

Node.js:如何将JSvariables的值从脚本传递给terminal?

给定一个运行D3jsdynamicdataviz的JS脚本 我目前打印出一个单一的视图到output.svg文件使用: svgcreator.node.js : 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' ], // … & offline // D3JS MAP DRAWING CODE * * * * * * * * * * * * * * * * * * * function (err, window) { […]

D3animation(转换)不适用于Angular应用程序

我在一个指令中破解了一个包含简单饼图的指令。 这是jsfiddle中的确切示例。 但是,一旦我试图将其移动到我的networking应用程序,我得到的graphics是build立在以前的会议(覆盖),但没有animation。 我没有控制台错误。 当我做数据的日志,数据传递正确。 以下是我目前使用的软件:AngularJS v1.2.1,D3版本:“3.4.13”,由Express和NodeJS托pipe。 任何build议可能会导致此错误。 我不想在每次获得新数据时重置SVG,我想要平滑过渡。 var App = angular.module('App', ['ngRoute', 'ngCookies']); App.directive('barsChart', function($parse) { d3.edge = {}; d3.edge.donut = function module() { var width = 460, height = 300, radius = Math.min(width, height) / 2; var color = d3.scale.category20(); ………….//rest is the same as the js fiddle example

排除故障d3.js安装“让我们制作地图”教程

我正在开始迈克·博斯托克的“让我们制作一个地图”教程,但是我正在碰到基本的安装问题。 我在Windows 8.1上运行这个。 这是部分: “接下来,您将需要TopoJSON的参考实现,它需要Node.js.(您可以通过Homebrew安装Node,但官方安装程序也可以。)安装Node之后,运行以下命令安装TopoJSON: npm install -g topojson 并validation两个安装,请尝试: 哪个ogr2ogr哪topojson“ 我安装了node.js,发现我必须在cmd.exe中运行'npm install -g topojson'命令。 而不是node.js,但是我遇到了'which'命令及其后面的错误。 当我input which ogr2ogr 在我的cmd.exe中,它说“哪一个不被识别为内部或外部命令”,当我在node.js中input时,它会显示“Syntax error; unexpected identifier” 帮帮我?