Install D3 on Meteor Angular2 - javascript

I am trying to integrate D3 and topojson using Meteor + Angular2
import { Component } from '#angular/core';
import template from './d3map.component.html';
import * from 'd3'
#Component({
selector: 'd3map',
template
})
export class D3MapComponent {}
I have also used below meteor command to install d3
meteor npm install --save d3
However, I get the below error
client/imports/app/d3map/d3map.component.ts (4, 15): Cannot find module 'd3'.
Any working examples/plunkr would help. Thank you

It seems like d3 is not installed.Do one thing go to .meteor folder of your project and open your packages file using any editor. check if D3 is installed or not in the list.
if not installed use meteor add d3js:d3 to install it. or some other package from atmospherejs.com
for reference try one of these. whichever works for you.
import * as D3 from 'd3/index';
import * as D3 from 'd3';

Related

Autocomplete feature when using Babylon.js with Vue.js in VSCode (no typescript)

I've created Vue.js 3 project, using Vite.js (no typescript).
My main.js file contains following contents:
import { createApp } from 'vue';
import App from './App.vue';
import * as BABYLON from 'babylonjs';
const app = createApp(App);
app.config.globalProperties.$BABYLON = BABYLON;
app.mount('#app');
My question is: how can I force VSCode to show me available babylon.js methods when I start writing this.$BABYLON. ?
I've already tried adding /// <reference path="../node_modules/babylonjs/babylon.module.d.ts" /> on top of the file, putting babylon.d.js in the root of the project (but as I understand that won't work until I use typescript?) and also tried with installing #types/babylon package via npm.
I would like to keep the project non-typescript and enable this autocomplete feature - unfortunately I've also couldn't find any plugin for vscode that would solve this issue.

Importing ES6 module causes script not to execute - Fullcalendar

I unintentionally updated a good junk of npm packages listed in my package.json file and now I'm experiencing issues importing the FullCalendar package.
Here's what I know:
When I import the Fullcalendar module or any any plugins from the package (e.g. import dayGridPlugin from '#fullcalendar/daygrid), the exported script does not execute. I have not had issues importing other npm packages in other js files. All of my other scripts have not experienced this issue.
JS File:
import * as utils from './utils.js';
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: .... Nothing happens.
However, If I do not import from #fullcalendar the script behaves as expected.
JS file:
import * as utils from './utils.js';
// import { Calendar } from '#fullcalendar/core';
// import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: show me something
Troubleshooting:
Webpack successfully updates the file after changes via npm run watch
I have confirmed the updated file is loading in the browser
I have tried reverting packages to previous version (e.g. #fullcalendar#4.4.2 - previous version that was working)... same result
Downgraded from webpack 5 -> webpack#4.46.0 ... same result
Checked documentation to ensure I was using fullcalendar v5 correctly after upgrading from v4 - https://fullcalendar.io/docs/initialize-es6
Relevant Version Nunbers
#fullcalendar/core#5.6.0
#fullcalendar/daygrid#5.6.0
#fullcalendar/list#5.6.0
#fullcalendar/timegrid#5.6.0
webpack#4.46.0
I'm really stumped on this one. I'm sure it's due to my limited knowledge of ES6 modules. I appreciate any insight that you can provide. Thanks!

ES6 export of a script

I'm using D3 v5 in React and has a visualization that uses v3. I'm using npm modules for the v5 but for v3, I'm trying to import D3 to be used in that visualization.
In my component I have:
import * as d3 from './lib/d3/v3/d3';
and in the d3 folder's d3.js, the minified v3 d3 script:
const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....
export default d3;
butI get the following error:
Failed to compile.
./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').
NetworkTopology.js:
...
const zoom = d3.behavior
.zoom()
"behavior" was removed in v4 so to me it looks like this is pulling the D3 V5 version instead of V3. How can I set this up to use both versions of D3?
I changed the import to:
import d3 from './lib/d3/v3/d3';
but got these compile errors:
Failed to compile.
./src/components/d3/NetworkTopology/lib/d3/v3/d3.js
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
and I get the same error with the original import * as d3 from './lib/d3/v3/d3'; combined with removing the const and export in the d3.js (just use the original minified file).
I don't think this has anything to do with the versions of d3. Your problem is that your script with the minified library has a single export default d3 (an export with the name default bound to a constant with the value of d3), while your component does a namespace import * as d3 which means that d3 will be a module object containing all exports - in your case, only the default one. So d3.default.behaviour could work. But you should just change your import to not use namespace objects but instead have the single value imported directly:
import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';
you should update
import d3 from './lib/d3/v3/d3';
While the previous answers got me around the original error in the top portion of my question, by using:
import d3 from './lib/d3/v3/d3
, I ended up getting ES-Lint errors, which I got around by adding
/* eslint-disable */
Howevever, I then got an error caused by Babel inserting "use strict" on the D3 minified code. Since Create React App doesn't allow modification of the Babel configuration without ejecting the application, I was stuck. I thought about putting in a script in the template or an AJAX call to get the D3 script from a CDN, but I'm not sure it would have worked with the two D3 versions in the same app.
What eventually worked was the following. I cloned the earlier version of D3 into a directory at my app's root, then I modified the name in its package.json to be 'd3-v3' and renamed the directory to 'd3-v3'. Scoped npm package naming would have been preferable for the package name.
Then I did a:
npm install file:./d3-v3
From my React component I used the following for D3 v3
import * as d3 from 'd3-v3';
and for v5 used:
import * as d3 from 'd3';

How can I import Material UI icons?i met some problems using Material ui icons

I was using Material UI with React in my project, and I had some troubles when it came to import the material icons. My code is copied from the Material UI (version:"material-ui": "^1.0.0-beta.41",
"material-ui-icons": "^1.0.0-beta.36",)
docs ,just like this:
import SkipPreviousIcon from '#material-ui/icons/SkipPrevious';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
import SkipNextIcon from '#material-ui/icons/SkipNext';
And I have also run npm install material-icons.
The error in my Chrome console is:
./src/index/musicCard.js Module not found: Can't resolve
'#material-ui/icons/PlayArrow' in
'C:\Users\wenji\Desktop\myblog\src\index'
And I tried this one:
import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';
And this one:
import SkipPreviousIcon from '#material-ui-icons/SkipPrevious';
But it does not make any difference. How can I fix it?
Icons are not part of material-ui/core, so it must be installed using two commands.
If you are using npm:
npm install #material-ui/core
npm install #material-ui/icons
If you are using Yarn:
yarn add #material-ui/core
yarn add #material-ui/icons
The icons module should be added to dependencies.
Use npm
npm install #material-ui/icons
Or use Yarn
yarn add #material-ui/icons
For the latest versions you need
npm install #mui/icons-material
Since Material-UI is now MUI.
And if we need a specific icon, we can get like,
import SkipPreviousIcon from '#mui/icons-material/SkipPrevious';
And here are all available icons.
I just solved a strange (but not so strange after I found out why) issue.
On Mac, it worked, but when I deployed to Linux, it failed and could not find the icon.
This was because on Mac it was not case sensitive and on Linux was.
So
import DeleteForEver from '#material-ui/icons/DeleteForEver'
works on Mac, but it fails on Linux.
The file is actually named like "DeleteForever".
So the correct way to import is:
import DeleteForever from '#material-ui/icons/DeleteForever'
Change the import path from #mui/icons-material/ to #material-ui/icons/
This is not a 100% working solution, as there have been icons I have yet to be able to import (e.g. ConnectWithoutContact)
Regardless, this change has saved me several times so here is an example:
// Initial
import PermContactCalendarIcon from '#mui/icons-material/PermContactCalendar';
// Fixed
import PermContactCalendarIcon from '#material-ui/icons/PermContactCalendar';
Material UI doesn't provide icons from "#material-ui/icons" any more. Instead, you need to import icons from "#mui/icons-material". So, if you are using the latest version and running your project with npm, you need to execute the following command:
npm install #mui/icons-material
If you use Yarn, then run the following:
yarn add #material-ui/icons
Now you are all set to use your Material icon ExampleMaterialIcon like this:
import ExampleMaterialIcon from '#mui/icons-material/ExampleMaterialIcon';
Dependencies:
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.3",
Example:
import FavoriteIcon from "#material-ui/icons/Favorite";
import ShareIcon from "#material-ui/icons/Share";
<FavoriteIcon
fontSize="large"
style={{ fill: "red", stroke: "red" }}
/>
<ShareIcon fontSize="large" />

import poly fill in TypeScript

Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.

Categories

Resources