Tag: d3.js
如何在D3中使用node.js工作
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3/d3.min.js"></script> </head> <body> <script type="text/javascript"> var dataA=[10,20]; d3.select("body").style("background-color", "green"); var canvas = d3.select("body") .append("svg") .attr("width",500) .attr("height",500); var bars = canvas.selectAll("rect") .data(dataA) .enter() .append("rect") .attr("width",function (d){ return d*5;}) .attr("height",10) .attr("y",function(d,i){ return i*20;}); </script> </body> 这是我在d3中用来绘制条形码的代码。 我怎样才能使用node.js来做同样的图表？
Dc.js lineChart失败
我正在尝试使用节点模块dc线图来绘制折线图。 它错过了我的错误从D3。 我正在使用dc.js版本2.0.0-beta17。 c:\projects\xxx\node_modules\dc\node_modules\d3\d3.js:1308 d3_behavior_zoomWheel = "onwheel" in d3_document ? (d3_behavior_zoomDelt ^ TypeError: Cannot use 'in' operator to search for 'onwheel' in undefined at Object.d3.behavior.zoom (c:\projects\xxx\node_modules\dc\node_modules\d3\d3.js:1308:44) at Object.dc.coordinateGridMixin (c:\projects\xxx\node_modules\dc\dc.js:2085:29) at Object.dc.lineChart (c:\projects\xxx\node_modules\dc\dc.js:4615:35) 示例代码是 var dc = require('dc'); .. var data = [ {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, {date: "12/28/2012", http_404: 2, http_200: […]
如何从mongodb获取数据，并使用nodejs显示为d3图表
我正在使用这个回购 。 这个回购提供显示来自fixture_data.json文件中的内部数据的图表。 现在我想显示使用mongodb的数据。 然后我做一些改变 app.js var express = require('express'); var app = express(); var MongoClient = require('mongodb').MongoClient, mongodb = require('mongodb'), Server = require('mongodb').Server; app.engine('.html', require('ejs').__express); app.set('views', __dirname); app.set('view engine', 'html'); var mongoclient = new MongoClient(new Server("localhost", 27017)); var db = mongoclient.db('mydb'); var fixtureData = require('./fixture_data.json'); app.locals.barChartHelper = require('./bar_chart_helper'); app.get('/', function(req, res) { res.render('index', { […]
检查两个数组中的JSON属性
介绍： 我正在使用d3.js库来绘制一个力布局图。 为了让图的更新过程看起来很平常，我想检查一个名为nodes的数组，它包含图中的所有当前nodes和新的incoming json object如果它们具有基于每个node具有的name属性的共享元素）。 示例JSON： { "nodes":[ {"name":"Harry Potter", "shortname":"Harry", "id":0}, {"name":"Severus Snape", "shortname":"Severus", "id":1} ], "links":[ {"source":0,"target":1,"relation":"hasTeacher"} ] } 每个name都是唯一的（ 是的，我知道你们中的一些人会争论名字不应该是唯一的原因 ），这个object将是一个函数的input参数。 function： 以下function将所有新的节点推到图上。 function pushNewElements(json) { var len = json.nodes.length; var difference = json.nodes.filter(function (el) { return isInGraph(el, len); }); difference.forEach(function (node) { nodes.push(node); }); } filter()函数 这个函数应该像filter一样工作，并获得nodes和json.nodes数组之间的json.nodes 。 经过多次testing，这是我能想到的最好的。 function isInGraph(jnode, […]
d3js与节点，如何添加一条线到饼图？
d3js新手在这里。 我正在使用d3js在服务器上呈现一个SVG。 经过一些教程，我能够想出这个： var fs = require('fs'); var d3 = require('d3'); var jsdom = require('jsdom'); var _ = require("underscore"); var chartWidth = 500, chartHeight = 500; var arc = d3.svg.arc() .outerRadius(chartWidth/2 – 10) .innerRadius(0); var colours = ['#98abc5','#8a89a6','#7b6888','#6b486b','#a05d56',"#d0743c", "#ff8c00"]; var pieData = [ { "category" : "Category A", "amount" : 300 }, { "category" : […]
Uncaught TypeError：canvas.selectAll（…）.data（…）.enter不是d3中的函数
当我尝试运行我的d3代码时，出现了2个错误。 首先是： 无法加载资源：net :: ERR_CONNECTION_REFUSED 第二个： Uncaught TypeError：canvas.selectAll（…）。data（…）。enter不是一个函数 我正在使用mongoose作为我的ORM，与d3的html和v4的把手。 <p>graph displayed here </p> <script> d3.json("graphdata.json", function (dataArray) { console.log(dataArray); var width = 500; var height = 500; console.log(width); var widthScale = d3.scaleLinear().domain([0, 420]).range([0, width]); var color = d3.scaleLinear().domain([0, 420]).range(["red", "blue"]); var xAxis = d3.axisBottom(widthScale); var canvas = d3.select("p") .append("svg") .attr("width", width) .attr("height", height); var bar […]
从d3力指向图中删除arrays的重复边
我有一个力量指向图的边缘arrays，看起来像这样，但更长。 var rawLinks = [{ source: 1, target: 2 }, { source: 2, target: 1 }, { source: 6, target: 7 }, { source: 7, target: 6 }, { source: 8, target: 9 }, { source: 8, target: 9 }, { source: 8, target: 86 }, { source: 8, target: 101 }, { source: 8, […]
D3强制布局：如何更新链接颜色？
我有和更新D3版面布局链接时发出。 这是我的代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Force-Directed Graph</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> circle.node { cursor: pointer; stroke: #00F000; stroke-width: 4px; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } </style> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> </head> <body> <div class="row"> <div > <div class="id_100"> <select> </select> </div> </div> <div id="chart"></div> </div> <script […]
在Angular 2应用程序中使用本地npm仓库中的组件
我已经使用d3和Angular 2实现了一个通用的图表组件。然后将它发布到本地的npm仓库中，以便任何人只要运行npm install my-chart命令就可以在他们的Angular项目中使用这个图表组件。 我创build了一个基本的Angular 2项目来重用我的图表组件。 然后运行npm install my-chart –save ，向package.json添加“@ my / my-chart”：“^ 1.0.0” 。 但运行服务器时出现问题，它会在我的控制台上提示错误。 Module not found: Error: Can't resolve 'd3' in '…\node_modules\@my\my-chart' 我需要在我的Angular项目中安装D3吗？ 但是我觉得在我们运行npm install my-chart的时候，把d3和图表组件捆绑在一起会更好。 什么是最好的？ 已发布软件包的package.json文件： { "name": "@my/my-chart", "version": "1.0.2", "license": "MIT", "angular-cli": {}, "author": "rosew", "main": "./index.js", "keywords": [ "button", "card" ] } 消费包的package.json文件： "dependencies": { "@angular/common": […]
用Webpack导入/编译d3 v4
我最近将PostCSS，Gulp和Webpack整合到了我的工作stream程中，但是学习曲线非常陡峭（尤其是Webpack！），并且在编译d3时遇到了问题。 我已经用npm install d3安装了d3 –save，并尝试将其导入为： var d3 = require("d3"); 哪个没用 我尝试安装一个装载机 ，添加 new webpack.ProvidePlugin({ d3: "d3" }), 到我的webpack.config文件并导入为 var d3 = require("d3!"); 哪个也没用 我已经尝试了这里和这里的东西（最后回答加载器）以及。 我从我的浏览器中得到以下错误： Uncaught ReferenceError: d3 is not defined 在命令行中，gulp给了我下面的错误： …./node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)"); 我的代码回购在这里 。 提前致谢！
