shinaisan/index.js

## index.js
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);
})();


## mksrc.sh
#!/bin/bash

test -d src || mkdir src
JS_FILES=$(ls *.js | grep -v config)
cp -v $JS_FILES template.html src


## package.json
{
  "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": "shinaisan@users.noreply.github.com",
  "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"
  }
}

## template.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack and D3 (d3.drag) Example</title>
  </head>
  <body>
  <div id="container">
  </div>
  </body>
</html>


## webpack.config.js
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"
  }
};
	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);
	})();
	#!/bin/bash

	test -d src \|\| mkdir src
	JS_FILES=$(ls *.js \| grep -v config)
	cp -v $JS_FILES template.html src
	{
	"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": "shinaisan@users.noreply.github.com",
	"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"
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Webpack and D3 (d3.drag) Example</title>
	</head>
	<body>
	<div id="container">
	</div>
	</body>
	</html>
	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"
	}
	};