zemirco · June 4, 2018 20:09
diff --git a/index.html b/index.html
 <!doctype html>
 <html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>

      .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 1;
      }

      .dot {
        fill: steelblue;
        stroke: #fff;
        stroke-width: 3;
      }

    </style>
  </head>

  <body>
    <svg></svg>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>

      const defaults = {
        target: '#chart',
        width: 640,
        height: 480,
        margin: {
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        }
      }

      class LineChart {

        constructor(config) {
          Object.assign(this, defaults, config)
          this.init()
        }

        init() {
          const {target, width, height, margin} = this
          const w = width - margin.left - margin.right
          const h = height - margin.top - margin.bottom

          this.svg = d3.select(target)
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`)

          this.xScale = d3.scaleLinear()
            .range([0, w])

          this.yScale = d3.scaleLinear()
            .range([h, 0])

          this.line = d3.line()
            .x((d, i) => this.xScale(i))
            .y(d => this.yScale(d))

          this.xAxis = d3.axisBottom(this.xScale)

          this.svg
            .append('g')
            .attr('class', 'x axis')
            .attr('transform', `translate(0, ${h})`)
            .call(this.xAxis)

          this.yAxis = d3.axisLeft(this.yScale)

          this.svg
            .append('g')
            .attr('class', 'y axis')
            .call(this.yAxis)

          this.svg
            .append('path')
            .attr('class', 'line')
        }

        render(data) {
          const {xScale, yScale, xAxis, yAxis, svg} = this

          xScale.domain([0, data.length - 1])

          svg.select('.x.axis')
            .call(xAxis)

          yScale.domain([0, 10])

          svg.select('.y.axis')
            .call(yAxis)

          svg
            .select('.line')
            .datum(data)
            .attr('d', this.line)

          svg
            .selectAll('.dot')
            .data(data)
            .enter()
            .append('circle')
            .attr('class', 'dot')
            .attr('cx', (d, i) => xScale(i))
            .attr('cy', d => yScale(d))
            .attr('r', 5)
        }

        resize(width) {
          const {svg, target, margin, xScale, xAxis, line} = this

          d3.select(target)
            .attr('width', width)

          const w = width - margin.left - margin.right

          xScale.range([0, w])

          svg.select('.x.axis')
            .call(xAxis)

          svg.selectAll('.dot')
            .attr('cx', (d, i) => xScale(i))

          svg.select('.line')
            .attr('d', line)
        }

      }

      const config = {
        target: 'svg',
        width: document.body.clientWidth
      }

      const chart = new LineChart(config)
      const data = [1, 0, 3, 2, 5, 4, 7, 6, 9, 8]
      chart.render(data)

      window.onresize = () => {
        const width = document.body.clientWidth
        chart.resize(width)
      }

    </script>
  </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<style>

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1;
	}

	.dot {
	fill: steelblue;
	stroke: #fff;
	stroke-width: 3;
	}

	</style>
	</head>

	<body>
	<svg></svg>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	const defaults = {
	target: '#chart',
	width: 640,
	height: 480,
	margin: {
	top: 20,
	right: 20,
	bottom: 30,
	left: 40
	}
	}

	class LineChart {

	constructor(config) {
	Object.assign(this, defaults, config)
	this.init()
	}

	init() {
	const {target, width, height, margin} = this
	const w = width - margin.left - margin.right
	const h = height - margin.top - margin.bottom

	this.svg = d3.select(target)
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform', `translate(${margin.left}, ${margin.top})`)

	this.xScale = d3.scaleLinear()
	.range([0, w])

	this.yScale = d3.scaleLinear()
	.range([h, 0])

	this.line = d3.line()
	.x((d, i) => this.xScale(i))
	.y(d => this.yScale(d))

	this.xAxis = d3.axisBottom(this.xScale)

	this.svg
	.append('g')
	.attr('class', 'x axis')
	.attr('transform', `translate(0, ${h})`)
	.call(this.xAxis)

	this.yAxis = d3.axisLeft(this.yScale)

	this.svg
	.append('g')
	.attr('class', 'y axis')
	.call(this.yAxis)

	this.svg
	.append('path')
	.attr('class', 'line')
	}

	render(data) {
	const {xScale, yScale, xAxis, yAxis, svg} = this

	xScale.domain([0, data.length - 1])

	svg.select('.x.axis')
	.call(xAxis)

	yScale.domain([0, 10])

	svg.select('.y.axis')
	.call(yAxis)

	svg
	.select('.line')
	.datum(data)
	.attr('d', this.line)

	svg
	.selectAll('.dot')
	.data(data)
	.enter()
	.append('circle')
	.attr('class', 'dot')
	.attr('cx', (d, i) => xScale(i))
	.attr('cy', d => yScale(d))
	.attr('r', 5)
	}

	resize(width) {
	const {svg, target, margin, xScale, xAxis, line} = this

	d3.select(target)
	.attr('width', width)

	const w = width - margin.left - margin.right

	xScale.range([0, w])

	svg.select('.x.axis')
	.call(xAxis)

	svg.selectAll('.dot')
	.attr('cx', (d, i) => xScale(i))

	svg.select('.line')
	.attr('d', line)
	}

	}

	const config = {
	target: 'svg',
	width: document.body.clientWidth
	}

	const chart = new LineChart(config)
	const data = [1, 0, 3, 2, 5, 4, 7, 6, 9, 8]
	chart.render(data)

	window.onresize = () => {
	const width = document.body.clientWidth
	chart.resize(width)
	}

	</script>
	</body>

	</html>