Syntax to import a d3 module using webpack - javascript

I am trying to import and use a d3 module. My project uses webpack.
The function in the module (https://github.com/d3/d3-plugins/blob/master/hive/hive.js) is declared like this:
d3.hive.link = function() {
I read the following to try and get the import working: https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ but I can't seem to crack the correct syntax to both import and call the link function.
Some of the variations I have tried are:
import {link as hiveLink} from 'd3-hive';
import {hive as hiveLink} from 'd3-hive';
import * as hiveLink from 'd3-hive';
Can someone point me at the correct import syntax?

The plugin you want to import is not an ES6 module. It is not compatible with D3 v4 (see README.md). So it just modifies your global d3 variable. While the article you referenced is about D3 v4 it does not work that way.
I think it is ok to import d3 library (version 3) which will initialize your global d3:
import * as d3 from 'd3';
and after that import that plugin which will add hive object into d3:
import 'd3-hive';

Related

javascript es6 import symbols into a namespace

Is it possible to import specific symbols from a ES6 javascript module, but still into a namespace? I'm looking for a combination of: import * as d3 from 'd3' which puts imported symbols into the d3 namespace, and import {select, selectAll} from 'd3-selection' which avoids importing everything. Ideally I would like something like that:
import {select, selectAll} as d3 from 'd3-selection'
d3.select(...)
d3.selectAll(...)
Is it possible? I want to keep the usual code syntax of d3.function in my code, but also import only the symbols I need.
You can perform that in two lines of code
import {select, selectAll} from 'd3-selection';
const d3 = {select, selectAll};

Vue reducing bundle size of fusioncharts and apexcharts

I try to reduce my vue bundle size by changing the import of vue-apexcharts and vue-fusioncharts.
this is the import of apexcharts:
import VueApexCharts from 'vue-apexcharts';
components: {
apexchart: VueApexCharts,
},
But I only use two type of charts.
And for fusioncharts:
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Widgets(FusionCharts);
FusionTheme(FusionCharts);
Vue.use(VueFusionCharts, FusionCharts);
I only use it for one chart "hbullet" and it import all the library.
fusioncharts
apexcharts
Vue version 2.6.12
Did any one know how I can import only the charts that I want to use and not all library.
Thanks.
You can use modular import with FusionCharts, here is a snippet below
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts/core';
import hbullet from 'fusioncharts/viz/hbullet';
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, hbullet);
Please note this will not work for older browsers like IE

Incorporating Treant.js into a Vue.js app

I am trying to incorporate the Treant.js library in my Vue app in order to generate a tree diagram from a JSON data object. Here are my import statements in my main view...
import Vue from "vue"
import store from "../../store"
import { getWebSocket } from "../../services/util.js"
import '../../assets/css/Treant.css'
import '../../assets/scripts/raphael'
var Treant = require("../../assets/scripts/Treant")
and here is where I attempt to call the Treant constructor (this.localTrace.route is the JSON object) ...
var tree = new Treant(this.localTrace.route, function() {alert('Tree Loaded')})
When I try to launch the page, I receive an error that states "Treant is not a constructor", and the app fails to build the tree.
CONVERSELY
I attempted to import the library globally in my main.js file like so...
import "./assets/scripts/raphael"
import "./assets/scripts/Treant"
When I do it this way, Vue can make its way into the Treant.js code, but then gives me this error instead
this._R.setSize is not a function
at Tree.handleOverflow (Treant.js?e3b3:842)
at Tree.positionNodes (Treant.js?e3b3:768)
at Tree.positionTree (Treant.js?e3b3:512)
at new Treant (Treant.js?e3b3:2164)
Any thoughts on how to make this work?
It's been a long time and you probably found a solution, but just for other guys visiting this tread:
open your main.js Vue initialization file and add:
import Raphael from "raphael"
window.Raphael = Raphael
Now Treant will be able to use Raphael correctly.

How to import with ECMAScript (vanilla javascript) with modules es6

I read this post and i want use D3.js (v4+) using only import statement like this:
import { selection } from '../node modules/d3/build/d3.js';
But, because code output is UMD (or read this) and can't import because some globals is no defined, and ES6 can't resolve absolutive names in node_modules for example and vanilla don't suport import statement without extension like this:
import * as someFeature from './myAwesomeModule';
And this is pattern to import modules and each day is growing up like you see here.
How i can use import statement without any plugin today?
You can import d3 like this:
import * as d3 from 'd3';
See more here: https://github.com/d3/d3/blob/master/README.md#installing

How to write import statement instead of require statement in Javascript?

I was importing one of the polyfill, "es6-promise" in my jsx file of react application but was not able to import it in a correct way.
I googled N number of solution finally one worked for IE.
require('es6-promise').polyfill()
its working fine but, why it was not working for import es6-promise from "es6-promise";
Is there any way to import it first in a variable and then calling the .polyfill() method to that variable?
There a multiple ways of how you can import other modules in your code: import
For example:
import * as ES6Promise from 'es6-promise';
ES6Promise.polyfill();
Just a couple more ways you can do it.
import { polyfill } from 'es6-promise';
polyfill();
or
import ES6Promise from 'es6-promise';
ES6Promise.polyfill();

Categories

Resources