I am trying to convert a d3 svg image to an image based on the following tutorial: https://github.com/hugolpz/svgcreator.node.js
I install the following statements:
sudo npm install -g jsdom d3js
npm install jsdom d3js
node svgcreator.node.js > out.svg
I used the following code
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' ], // ... & local-offline
function (err, window) {
// D3JS CODE * * * * * * * * * * * * * * * * * * * * * * * *
var svg = window.d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("rect")
.attr("id", "rect1")
.attr("x", 10)
.attr("y", 10)
.attr("width", 80)
.attr("height", 80)
.style("fill", "green");
// END (D3JS) * * * * * * * * * * * * * * * * * * * * * * * *
//PRINTING OUT SELECTION
console.log( window.d3.select("body").html() );
} // end function
);
When i execute node svgcreator.node.js > out.svg i get the following error
TypeError: jsdom.env is not a function
at Object.<anonymous> (C:\Users\ErikvanderHoeven\Documents\git\svgcreator.node.js\svgcreator.node.js:5:7)
?[90m at Module._compile (internal/modules/cjs/loader.js:1063:30)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:928:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:769:14)?[39m
?[90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)?[39m
?[90m at internal/main/run_main_module.js:17:47?[39
It seems you have a dependency version issue - the code in the Github project is several years old and the instructions are loading much later versions of the dependencies than when the example code was written.
I get an npm error trying to install d3js and jsdom is on v16.4. If I run:
npm install jsdom d3 --save
My package.json is:
{
"name": "test-jsdom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"d3": "^6.5.0",
"jsdom": "^16.4.0"
}
}
Github user dam1r89 shows a way to do what you are trying on later versions in this gist.
My take on it:
const d3 = require("d3");
const fs = require("fs");
const {JSDOM} = require("jsdom");
// init d3 - https://gist.github.com/tomgp/c99a699587b5c5465228
const minHtml = "<html><head></head><body></body></html>";
const dom = new JSDOM(`${minHtml}`, { pretendToBeVisual: true });
const window = dom.window;
window.d3 = d3.select(window.document);
// D3JS CODE * * * * * * * * * * * * * * * * * * * * * * * *
var svg = window.d3.select("body")
.append("svg")
.attr("width", 100)
.attr("height", 100);
svg.append("rect")
.attr("id", "rect1")
.attr("x", 10)
.attr("y", 10)
.attr("width", 80)
.attr("height", 80)
.style("fill", "green");
// END (D3JS) * * * * * * * * * * * * * * * * * * * * * * * *
console.log( window.d3.select("body").html() );
Which outputs:
<svg width="100" height="100"><rect id="rect1" x="10" y="10" width="80" height="80" style="fill: green;"></rect></svg>
Related
SERVER.JS RESUME DOTENV
const dotenv = require('dotenv-safe');
this.dotenv = dotenv.load();
Problems:
1) I can not run the nodemon if it has only the .env file, it runs only if it contains the .env and .env.example files and I would like to know why and how to correctly match it.
2) How to insert the .env in the /env folder without the problem nodemon?
3) In my start script of package.json is the following "start_dev": "nodemon app/backend/src/start.js", however it is giving the following error:
nodemon app / backend / src / start.js
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *. *
[nodemon] starting `node app / backend / src / start.js`
consign v0.1.6 Initialized in C: \ Users \ THIAGOSAAD \ Documents \ DEVELOPMENT \ NEORIS \ ALIANSCE \ aliansce-app-analyticals-panel
fs.js: 115
throw err;
^
Error: ENOENT: no such file or directory, open '.env.example'
at Object.openSync (fs.js: 436: 3)
at Object.readFileSync (fs.js: 341: 35)
C: \ Users \ THIAGOSAAD \ Documents \ DEVELOPMENT \ NEORIS \ ALIANSCE \ aliansce-app-analyticals-panel \ node_modules \ dotenv-safe \ index.js: 27: 45)
at new Application (C: \ Users \ THIAGOSAAD \ Documents \ DEVELOPMENT \ NEORIS \ ALIANSCE \ aliansce-app-analyticals-panel \ app \ backend \ src \ config \ server.js: 11: 32)
at-the-object. <anonymous> (C: \ Users \ THIAGOSAAD \ Documents \ DEVELOPMENT \ NEORIS \ ALIANSCE \ aliansce-app-analyticals-panel \ app \ backend \ src \ config \ server.js: 65: 18)
at Module._compile (internal / modules / cjs / loader.js: 688: 30)
at Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
at Module.load (internal / modules / cjs / loader.js: 598: 32)
at tryModuleLoad (internal / modules / cjs / loader.js: 537: 12)
at Function.Module._load (internal / modules / cjs / loader.js: 529: 3)
at Module.require (internal / modules / cjs / loader.js: 636: 17)
at require (internal / modules / cjs / helpers.js: 20: 18)
at aliasce-app-analyticals-panel \ app \ backend \ src \ start.js: 1: 78)
at Module._compile (internal / modules / cjs / loader.js: 688: 30)
at Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
at Module.load (internal / modules / cjs / loader.js: 598: 32)
[nodemon] app crashed - waiting for file changes before starting ...
And if I run the nodemon in the C:\Users\username\Documents\DEVELOPMENT\NEORIS\ ALIANSCE\aliansce-app-analyticals-panel\app\ ackend\src directory
It works!
I looked at this line of code - https://github.com/rolodato/dotenv-safe/blob/master/index.js#L27
It tries to read file .env.example but can not find it in the current folder (run pwd to check it)
It might be 3 ways to solve issue
1) Run
cd app/backend/src
nodemon start.js
2) Move files .env, .env.example to parent folder (aliansce-app-analyticals-panel) and then run nodemon app/backend/src/start.js
3) Do not use dotenv-safe at all. Use your own simple script like this one
Just look at this simple example:
https://github.com/olegdovger/pizza-delivery-api/blob/master/lib/env.js (script)
https://github.com/olegdovger/pizza-delivery-api/blob/master/index.js#L1 (how to invoke script)
With help of #OlegDover and yargs, I managed to pass .env file from a different path and use nodemon for hot-reloading during development.
e.g. $ nodemon --watch /path/to/.env server.js --envPath=path/to/.env will pick up changes to .env file and restart deployment.
Example Code
.env
EXAMPLE_HOST=myhost
EXAMPLE_PORT=5566
env.js
/*
* Module dependencies
*/
const fs = require("fs");
const yargs = require("yargs");
/*
* Custom class to update process.env from custom filepath
* Ref: https://github.com/olegdovger/pizza-delivery-api/blob/master/lib/env.js
*/
class Env {
constructor(envPath) {
this.variables = [];
this._setup(envPath);
}
_setup(envPath) {
try {
const data = fs.readFileSync(envPath, {
encoding: "utf-8",
});
const stringArray = data.split("\n");
this.variables = stringArray.map((string) => {
const arr = string.split("=");
return {
name: arr[0],
value: arr[1],
};
});
} catch (err) {
console.error("Unable to load .env;", err);
}
}
load() {
this.variables.forEach((variable) => {
process.env[variable.name] = variable.value;
});
}
}
/*
* Load .env from argv filepath
*/
const argv = yargs.argv;
new Env(argv["envPath"]).load();
/**
* Register
*/
module.exports = {
EXAMPLE_HOST: process.env.EXAMPLE_HOST || "localhost",
EXAMPLE_PORT: Number(process.env.EXAMPLE_PORT) || 12345,
};
server.js
const { EXAMPLE_HOST, EXAMPLE_PORT } = require("./env");
The environment variables can then be loaded/used in the project, having the fallback values if they are not defined in the .env file.
i.e. if EXAMPLE_HOST is not present in .env, this value will default to localhost
I am writing a schema for two get routes where the result is an object like
{
"id":"49077acb6ac8",
"info":
{
"name":"test"
}
}
Actually I got this :
/*
* #swagger
* definitions:
* getVCenter:
* id:
* type: string
* format: uuid
* info:
* type: object
* properties:
* name:
* type: string
* fullName:
* type: string
* vendor:
* type: string
* /v1/vcenters/:
* get:
* tags:
* - vcenters
* summary: Get availables vCenters.
* description: Get a list of availables vCenters.
* produces:
* - application/json
* responses:
* 200:
* description: an array of vCenters
* schema:
* $ref : '#definitions/getVCenter'
*/
But it doesn't work anymore.
Can someone explain to me what I did wrong please?
There are syntax errors in your annotation.
The indentation of info properties should be as follows:
* info:
* type: object
* properties: # <-- "properties" must be on the same level as "type: object"
* name:
* type: string
* fullName:
* type: string
* vendor:
* type: string
In $refs, there must be a / after # - replace #definitions with #/definitions:
$ref : '#/definitions/getVCenter'
Also, if the response is supposed to be "an array of vCenters" and not a single vCenter, then the response schema should be:
* responses:
* 200:
* description: an array of vCenters
* schema:
* type: array
* items:
* $ref : '#/definitions/getVCenter'
My 'App.vue' style is:
<style lang="stylus">
#import "../node_modules/font-awesome/css/font-awesome.css"
#import "~bootstrap-4-grid"
#import "assets/styl/app.styl"
</style>
After running
yarn dev
on default vue-cli webpack config, I am getiing:
These relative modules were not found:
* ../fonts/fontawesome-webfont.eot in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.eot?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.svg?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.ttf?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.woff2?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.woff?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./s
Did someone faced the same issue?
Replace this :
#import "../node_modules/font-awesome/css/font-awesome.css"
by this :
#import "~font-awesome/css/font-awesome.css"
I'm trying to create API documents through grunt-ngdocs.
The partials are created but the index.html doesn't have the correct links to it.
I have in my gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
unit: {
configFile: 'karma.conf.js'
}
},
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'web/js/app.min.js': ['web/js/app.js']
}
}
},
ngdocs: {
options: {
dest: 'docs',
scripts: ['web/js/app.js'],
title: 'My Documentation'
},
api: {
src: ['web/**/*.js'],
title: 'API Documentation'
}
},
clean:['docs','testResult']
});
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-ngdocs');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('default', ['clean','uglify', 'ngdocs', 'karma']);
};
and my js file like this
/**
* #ngdoc overview
* #ngdoc directive
* #name myApp.maincontroller:controller
* #description
*
* # myApp
* The factoryName is my favorite service in the world.
*
*/
var myApp = angular.module('myApp',[]);
myApp.controller("MainController", function($scope) {
$scope.model = {
myValue: "Run you fools!"
};
});
/**
* #ngdoc function
* #name mySuperFunction
* #returns {int} The int representing a Firebase resource
*/
function mySuperFunction() {
var i = 5;
var j = 5;
i += j;
return i;
}
but when I run
grunt
in the command line, the result is this
C:\Users\Lino Simões\Documents\bitbucket\test>grunt -d --force
Running "clean:0" (clean) task
[D] Task source: C:\Users\Lino Simões\Documents\bitbucket\test\node_modules\grun
t-contrib-clean\tasks\clean.js
Cleaning docs...OK
Running "clean:1" (clean) task
[D] Task source: C:\Users\Lino Simões\Documents\bitbucket\test\node_modules\grun
t-contrib-clean\tasks\clean.js
Cleaning testResult...OK
Running "uglify:dist" (uglify) task
[D] Task source: C:\Users\Lino Simões\Documents\bitbucket\test\node_modules\grun
t-contrib-uglify\tasks\uglify.js
File web/js/app.min.js created: 796 B → 210 B
Running "ngdocs:api" (ngdocs) task
[D] Task source: C:\Users\Lino Simões\Documents\bitbucket\test\node_modules\grun
t-ngdocs\tasks\grunt-ngdocs.js
Generating Documentation...
DONE. Generated 2 pages in 256ms.
Running "karma:unit" (karma) task
[D] Task source: C:\Users\Lino Simões\Documents\bitbucket\test\node_modules\grun
t-karma\tasks\grunt-karma.js
INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Windows 7)]: Connected on socket dFX-dKGVINA6PBjB5Gu9 wit
h id 91061839
PhantomJS 1.9.7 (Windows 7): Executed 8 of 8 SUCCESS (0.008 secs / 0.004 secs)
Done, without errors.
so, this generates 2 files, but when I go to the index.html under docs I have this:
but in my docs/partials/api/ I have the partials created by the ngdocs.
my project tree is like this:
Did you have angular.js and angular-animate.js in your web/js/app.js? Check it. And add to "options" html5Mode: false
for ng1.6 works for me:
ngdocs: {
all: ['app/**/*.js']
}
you will see the old version of angular 1.2.* in
cat docs/js/angular.min.js | grep v1
AngularJS v1.2.16
but it does not affect your source files.
also, dont forget run server
for generated folder docs:
e.g using python
pushd ./dist; python -m SimpleHTTPServer 9000; popd #v 2.*
pushd ./dist; python -m http.server 9000; popd #v 3.*
unfortunately, adding angular.js and angular-animate.js to scripts option doesn't work for me
Hi guys i'm trying to rotate few objects at once with Set using Element.animate() but it rotates each element not the whole set and i need whole set
Help me please i'm very new to raphael just about few hours of reading docs and trying functions
var archtype = Raphael("canvas", 600, 600);
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [["M", xloc, yloc - R],["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]];
} else {
path = [["M", xloc, yloc - R],["A", R, R, 0, +(alpha > 180), 1, x, y]];
}
return {
path: path
};
};
var circleSet=archtype.set();
var arc_red0 = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 30,
arc: [300, 300, 30, 360, 250]
});
circleSet.push(arc_red0);
var arc_red1 = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 30,
arc: [300, 300, 20, 360, 250],
"transform": "r50,300,300"
});
circleSet.push(arc_red1);
var arc_red2 = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 30,
arc: [300, 300, 80, 360, 250],
"transform": "r90,300,300"
});
circleSet.push(arc_red2);
var arc_red3 = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 30,
arc: [300, 300, 60, 360, 250],
"transform": "r190,300,300"
});
circleSet.push(arc_red3);
var arc_red4 = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 30,
arc: [300, 300, 70, 360, 250],
"transform": "r270,300,300"
});
circleSet.push(arc_red4);
var $angle=0;
(function (){
circleSet.animate({transform:"r"+$angle+",300,300"},200);
$angle++;
init = false;
setTimeout(arguments.callee, 60);
})();
Option 1: Use Raphael's sets feature -- Add all the elements to a set, and then tell Raphael to rotate the set. See http://raphaeljs.com/reference.html#Paper.set for more info.
This won't actually rotate the whole Raphael element, but if all elements of the image are part of the set, it will look like it is doing so.
Option 2: Use standard CSS to rotate the element or it's HTML container. This might actually be the simplest option, but has the down-side that it won't work in older browsers (particularly old versions of IE). There are work-arounds for this (eg CSS Sandpaper), but if you're already using Raphael to aid IE compatibility you may not want to have to use another script as well.