Last active
July 24, 2021 18:32
-
-
Save shinaisan/14ae7165c8262fbc8f49b7f9b0a7998d to your computer and use it in GitHub Desktop.
Webpack and D3 (d3.drag) Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as d3 from 'd3'; | |
| var config = { | |
| width: 640, | |
| height: 640, | |
| plot: { | |
| width: 560, | |
| height: 560, | |
| } | |
| }; | |
| function initPlot(svg) { | |
| const width = config.plot.width; | |
| const height = config.plot.height; | |
| const marginLeft = Math.floor((config.width - config.plot.width)/2); | |
| const marginTop = Math.floor((config.height - config.plot.height)/2); | |
| const margin = { | |
| top: marginTop, left: marginLeft, bottom: marginTop, right: marginLeft | |
| }; | |
| const g = svg.append('g') | |
| .attr('class', 'plot') | |
| .attr('transform', `translate(${margin.left},${margin.top})`); | |
| g.selectAll('circle') | |
| .data([{x: width / 2, y: height / 2}]) | |
| .enter() | |
| .append('circle') | |
| .attr('r', 8) | |
| .attr('cx', (d) => (d.x)) | |
| .attr('cy', (d) => (d.y)) | |
| .style('fill', 'red') | |
| .call(d3.drag().on('drag', function (d) { // (d) => {} does not work!! | |
| d3.select(this) | |
| .attr('cx', d.x = d3.event.x) | |
| .attr('cy', d.y = d3.event.y); | |
| })); | |
| svg | |
| .attr('width', config.width) | |
| .attr('height', config.height); | |
| return svg; | |
| } | |
| (() => { | |
| const svg = d3.select("#container").append('svg') | |
| .attr("width", config.width) | |
| .attr("height", config.height); | |
| initPlot(svg); | |
| })(); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| test -d src || mkdir src | |
| JS_FILES=$(ls *.js | grep -v config) | |
| cp -v $JS_FILES template.html src | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "webpack-d3-example-2", | |
| "version": "1.0.0", | |
| "description": "Webpack and D3 (d3.drag) Example", | |
| "main": "index.js", | |
| "scripts": { | |
| "webpack": "webpack", | |
| "start:dev": "webpack-serve ./webpack.config.js --no-reload", | |
| "test": "jest" | |
| }, | |
| "author": "[email protected]", | |
| "license": "ISC", | |
| "dependencies": { | |
| "d3": "^5.7.0" | |
| }, | |
| "devDependencies": { | |
| "@babel/core": "^7.0.1", | |
| "babel-loader": "^8.0.2", | |
| "babel-preset-env": "^1.7.0", | |
| "css-loader": "^1.0.0", | |
| "html-webpack-plugin": "^3.2.0", | |
| "identity-obj-proxy": "^3.0.0", | |
| "jest": "^23.6.0", | |
| "raw-loader": "^0.5.1", | |
| "style-loader": "^0.23.0", | |
| "webpack": "^4.19.0", | |
| "webpack-cli": "^3.1.0", | |
| "webpack-serve": "^2.0.2" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Webpack and D3 (d3.drag) Example</title> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| </div> | |
| </body> | |
| </html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const HtmlWebpackPlugin = require('html-webpack-plugin'); // Installed via npm | |
| const webpack = require('webpack'); // To access built-in plugins | |
| const path = require('path'); | |
| const paths = { | |
| src: path.join(__dirname, 'src'), | |
| dist: path.join(__dirname, 'dist'), | |
| public: path.join(__dirname, 'public') | |
| }; | |
| const HOST = process.env.HOST; | |
| module.exports = { | |
| mode: process.env.WEBPACK_SERVE ? 'development' : 'production', | |
| // Or pass it as a CLI argument: webpack --mode=production | |
| target: 'web', // Default | |
| entry: { | |
| main: path.join(paths.src, 'index.js') | |
| }, | |
| output: { | |
| path: path.resolve(paths.dist), | |
| filename: '[name].js', | |
| pathinfo: true | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(txt|md)$/, | |
| use: 'raw-loader' | |
| }, | |
| { // webpack --module-bind 'css=style-loader!css-loader' | |
| test: /\.css$/, | |
| use: [ | |
| { loader: 'style-loader' }, | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| modules: true // Enable CSS Modules | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| test: /\.(js|jsx)$/, | |
| include: paths.src, | |
| loader: require.resolve('babel-loader'), | |
| options: { | |
| babelrc: false, | |
| presets: ["env"], | |
| // This is a feature of `babel-loader` for webpack (not Babel itself). | |
| // It enables caching results in ./node_modules/.cache/babel-loader/ | |
| // directory for faster rebuilds. | |
| cacheDirectory: false | |
| }, | |
| } | |
| ] | |
| }, | |
| performance: { | |
| hints: "warning", | |
| maxEntrypointSize: 1000000, | |
| maxAssetSize: 1000000 | |
| }, | |
| devtool: "source-map", | |
| serve: { | |
| host: HOST, | |
| port: 3000, | |
| content: paths.dist, | |
| logLevel: 'debug' | |
| }, | |
| stats: "verbose", | |
| plugins: [ | |
| new HtmlWebpackPlugin({ | |
| filename: 'index.html', | |
| template: path.join(paths.src, 'template.html') | |
| }) | |
| ], | |
| node: { | |
| fs: "empty" | |
| } | |
| }; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment