jfsiii/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Install

git clone https://gist.github.com/029a732fe90aee341ed0e5e50ac29ba3.git && \
cd 029a732fe90aee341ed0e5e50ac29ba3/ && \
npm install && \
npm run build && \
open index.html


## index.html
<!doctype html>
<html>
<body>
  <script src="bundle.js"></script>
</body>
</html>

## index.js
import * as d3 from 'd3'
import 'd3-selection-multi'

const body = d3.select('body')
const svg = body.append('svg')
const rect = svg.append('rect')

rect
  .attr('class', 'box')
  .attr('x', 20)
  .attr('y', 20)
  .attr('height', 100)
  .attr('width', 200)
  .attr('fill', 'blue')

d3.select('.box')
  .attrs({ fill: 'red' })

## package.json
{
  "name": "d3-selection-multi-with-webpack-example",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "build": "webpack index.js bundle.js"
  },
  "dependencies": {
    "d3": "4.6.0",
    "d3-selection-multi": "1.0.0"
  },
  "devDependencies": {
    "webpack": "^2.2.1"
  }
}

## webpack.config.js
module.exports = {
  resolve: { mainFields: [ 'module' ] }
};
	<!doctype html>
	<html>
	<body>
	<script src="bundle.js"></script>
	</body>
	</html>
	import * as d3 from 'd3'
	import 'd3-selection-multi'

	const body = d3.select('body')
	const svg = body.append('svg')
	const rect = svg.append('rect')

	rect
	.attr('class', 'box')
	.attr('x', 20)
	.attr('y', 20)
	.attr('height', 100)
	.attr('width', 200)
	.attr('fill', 'blue')

	d3.select('.box')
	.attrs({ fill: 'red' })
	{
	"name": "d3-selection-multi-with-webpack-example",
	"private": true,
	"version": "1.0.0",
	"scripts": {
	"build": "webpack index.js bundle.js"
	},
	"dependencies": {
	"d3": "4.6.0",
	"d3-selection-multi": "1.0.0"
	},
	"devDependencies": {
	"webpack": "^2.2.1"
	}
	}