ckinmind/README.md

## README.md

      
    Raw
  

              README.md
            
          
    说明


图表类型：Line图
原图地址：Update d3.js data with button press
原图是v3版本，改成v4版本，数据本地获取


## data.js

const data1 = [
  {
    "date": "1-May-12",
    "close": "58.13"
  },
  {
    "date": "30-Apr-12",
    "close": "53.98"
  },
  {
    "date": "27-Apr-12",
    "close": "67.00"
  },
  {
    "date": "26-Apr-12",
    "close": "89.70"
  },
  {
    "date": "25-Apr-12",
    "close": "99.00"
  },
  {
    "date": "24-Apr-12",
    "close": "130.28"
  },
  {
    "date": "23-Apr-12",
    "close": "166.70"
  },
  {
    "date": "20-Apr-12",
    "close": "234.98"
  },
  {
    "date": "19-Apr-12",
    "close": "345.44"
  },
  {
    "date": "18-Apr-12",
    "close": "443.34"
  },
  {
    "date": "17-Apr-12",
    "close": "543.70"
  },
  {
    "date": "16-Apr-12",
    "close": "580.13"
  },
  {
    "date": "13-Apr-12",
    "close": "605.23"
  },
  {
    "date": "12-Apr-12",
    "close": "622.77"
  },
  {
    "date": "11-Apr-12",
    "close": "626.20"
  },
  {
    "date": "10-Apr-12",
    "close": "628.44"
  },
  {
    "date": "9-Apr-12",
    "close": "636.23"
  },
  {
    "date": "5-Apr-12",
    "close": "633.68"
  },
  {
    "date": "4-Apr-12",
    "close": "624.31"
  },
  {
    "date": "3-Apr-12",
    "close": "629.32"
  },
  {
    "date": "2-Apr-12",
    "close": "618.63"
  },
  {
    "date": "30-Mar-12",
    "close": "599.55"
  },
  {
    "date": "29-Mar-12",
    "close": "609.86"
  },
  {
    "date": "28-Mar-12",
    "close": "617.62"
  },
  {
    "date": "27-Mar-12",
    "close": "614.48"
  },
  {
    "date": "26-Mar-12",
    "close": "606.98"
  }
]

const data2 = [
  {
    "date": "10-May-12",
    "close": "99.55"
  },
  {
    "date": "8-May-12",
    "close": "76.86"
  },
  {
    "date": "6-May-12",
    "close": "67.62"
  },
  {
    "date": "4-May-12",
    "close": "64.48"
  },
  {
    "date": "2-May-12",
    "close": "60.98"
  },
  {
    "date": "1-May-12",
    "close": "58.13"
  },
  {
    "date": "30-Apr-12",
    "close": "53.98"
  },
  {
    "date": "27-Apr-12",
    "close": "67.00"
  },
  {
    "date": "26-Apr-12",
    "close": "89.70"
  },
  {
    "date": "25-Apr-12",
    "close": "99.00"
  },
  {
    "date": "24-Apr-12",
    "close": "90.28"
  },
  {
    "date": "23-Apr-12",
    "close": "106.70"
  },
  {
    "date": "20-Apr-12",
    "close": "94.98"
  },
  {
    "date": "19-Apr-12",
    "close": "85.44"
  },
  {
    "date": "18-Apr-12",
    "close": "73.34"
  },
  {
    "date": "17-Apr-12",
    "close": "53.70"
  },
  {
    "date": "16-Apr-12",
    "close": "50.13"
  },
  {
    "date": "13-Apr-12",
    "close": "65.23"
  },
  {
    "date": "12-Apr-12",
    "close": "62.77"
  },
  {
    "date": "11-Apr-12",
    "close": "66.20"
  },
  {
    "date": "10-Apr-12",
    "close": "68.44"
  },
  {
    "date": "9-Apr-12",
    "close": "66.23"
  },
  {
    "date": "5-Apr-12",
    "close": "63.68"
  },
  {
    "date": "4-Apr-12",
    "close": "64.31"
  },
  {
    "date": "3-Apr-12",
    "close": "69.32"
  },
  {
    "date": "2-Apr-12",
    "close": "61.63"
  }
]

## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style> /* set the CSS */

body { font: 12px Arial;}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<div id='option'>
    <input name='updateButton'
           type='button'
           value='Update'
           onclick='updateData()' />
</div>

<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='./data.js'></script>
<script>

  // 数据预处理
  const parseDate = d3.timeParse('%d-%b-%y')

  data1.forEach(d => {
    d.date = parseDate(d.date)
    d.close = +d.close
  })

  data2.forEach(d => {
    d.date = parseDate(d.date)
    d.close = +d.close
  })


  const margin = {top: 30, right: 20, bottom: 30, left: 50}
  const width = 660 - margin.left - margin.right
  const height = 400 - margin.top - margin.bottom


  const x = d3.scaleTime().range([0, width])
  const y = d3.scaleLinear().range([height, 0])
  const xAxis = d3.axisBottom(x).ticks(5)
  const yAxis = d3.axisLeft(y).ticks(5)

  const valueline = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.close))

  const svg = d3.select('body')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`)


    let currentData = 'data1'
    const data = data1
    // 设置比例尺的范围
    x.domain(d3.extent(data, d => d.date))
    y.domain([0, d3.max(data, d => d.close)])

    // 添加折线
    svg.append('path')
      .attr('class', 'line')
      .attr('d', valueline(data))

    // 添加x轴
    svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', `translate(0, ${height})`)
      .call(xAxis)

    // 添加y轴
    svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)

  // 更新数据
  function updateData() {

    let data = []
    if (currentData == 'data1') {
      data = data2
      currentData = 'data2'
    } else {
      data = data1
      currentData = 'data1'
    }

      // 重置x轴和y轴比例尺
      x.domain(d3.extent(data, d => d.date))
      y.domain([0, d3.max(data, d => d.close)])

      const svg = d3.select('body').transition()

      // 更新折线
      svg.select('.line')
        .duration(750)
        .attr('d', valueline(data))

      // 更新x轴
      svg.select('.x.axis')
        .duration(750)
        .call(xAxis)

      // 更新y轴
      svg.select('.y.axis')
        .duration(750)
        .call(yAxis)
  }

</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png

	const data1 = [
	{
	"date": "1-May-12",
	"close": "58.13"
	},
	{
	"date": "30-Apr-12",
	"close": "53.98"
	},
	{
	"date": "27-Apr-12",
	"close": "67.00"
	},
	{
	"date": "26-Apr-12",
	"close": "89.70"
	},
	{
	"date": "25-Apr-12",
	"close": "99.00"
	},
	{
	"date": "24-Apr-12",
	"close": "130.28"
	},
	{
	"date": "23-Apr-12",
	"close": "166.70"
	},
	{
	"date": "20-Apr-12",
	"close": "234.98"
	},
	{
	"date": "19-Apr-12",
	"close": "345.44"
	},
	{
	"date": "18-Apr-12",
	"close": "443.34"
	},
	{
	"date": "17-Apr-12",
	"close": "543.70"
	},
	{
	"date": "16-Apr-12",
	"close": "580.13"
	},
	{
	"date": "13-Apr-12",
	"close": "605.23"
	},
	{
	"date": "12-Apr-12",
	"close": "622.77"
	},
	{
	"date": "11-Apr-12",
	"close": "626.20"
	},
	{
	"date": "10-Apr-12",
	"close": "628.44"
	},
	{
	"date": "9-Apr-12",
	"close": "636.23"
	},
	{
	"date": "5-Apr-12",
	"close": "633.68"
	},
	{
	"date": "4-Apr-12",
	"close": "624.31"
	},
	{
	"date": "3-Apr-12",
	"close": "629.32"
	},
	{
	"date": "2-Apr-12",
	"close": "618.63"
	},
	{
	"date": "30-Mar-12",
	"close": "599.55"
	},
	{
	"date": "29-Mar-12",
	"close": "609.86"
	},
	{
	"date": "28-Mar-12",
	"close": "617.62"
	},
	{
	"date": "27-Mar-12",
	"close": "614.48"
	},
	{
	"date": "26-Mar-12",
	"close": "606.98"
	}
	]

	const data2 = [
	{
	"date": "10-May-12",
	"close": "99.55"
	},
	{
	"date": "8-May-12",
	"close": "76.86"
	},
	{
	"date": "6-May-12",
	"close": "67.62"
	},
	{
	"date": "4-May-12",
	"close": "64.48"
	},
	{
	"date": "2-May-12",
	"close": "60.98"
	},
	{
	"date": "1-May-12",
	"close": "58.13"
	},
	{
	"date": "30-Apr-12",
	"close": "53.98"
	},
	{
	"date": "27-Apr-12",
	"close": "67.00"
	},
	{
	"date": "26-Apr-12",
	"close": "89.70"
	},
	{
	"date": "25-Apr-12",
	"close": "99.00"
	},
	{
	"date": "24-Apr-12",
	"close": "90.28"
	},
	{
	"date": "23-Apr-12",
	"close": "106.70"
	},
	{
	"date": "20-Apr-12",
	"close": "94.98"
	},
	{
	"date": "19-Apr-12",
	"close": "85.44"
	},
	{
	"date": "18-Apr-12",
	"close": "73.34"
	},
	{
	"date": "17-Apr-12",
	"close": "53.70"
	},
	{
	"date": "16-Apr-12",
	"close": "50.13"
	},
	{
	"date": "13-Apr-12",
	"close": "65.23"
	},
	{
	"date": "12-Apr-12",
	"close": "62.77"
	},
	{
	"date": "11-Apr-12",
	"close": "66.20"
	},
	{
	"date": "10-Apr-12",
	"close": "68.44"
	},
	{
	"date": "9-Apr-12",
	"close": "66.23"
	},
	{
	"date": "5-Apr-12",
	"close": "63.68"
	},
	{
	"date": "4-Apr-12",
	"close": "64.31"
	},
	{
	"date": "3-Apr-12",
	"close": "69.32"
	},
	{
	"date": "2-Apr-12",
	"close": "61.63"
	}
	]
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<style> /* set the CSS */

	body { font: 12px Arial;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	</style>
	<body>

	<div id='option'>
	<input name='updateButton'
	type='button'
	value='Update'
	onclick='updateData()' />
	</div>

	<script src='https://d3js.org/d3.v4.min.js'></script>
	<script src='./data.js'></script>
	<script>

	// 数据预处理
	const parseDate = d3.timeParse('%d-%b-%y')

	data1.forEach(d => {
	d.date = parseDate(d.date)
	d.close = +d.close
	})

	data2.forEach(d => {
	d.date = parseDate(d.date)
	d.close = +d.close
	})


	const margin = {top: 30, right: 20, bottom: 30, left: 50}
	const width = 660 - margin.left - margin.right
	const height = 400 - margin.top - margin.bottom


	const x = d3.scaleTime().range([0, width])
	const y = d3.scaleLinear().range([height, 0])
	const xAxis = d3.axisBottom(x).ticks(5)
	const yAxis = d3.axisLeft(y).ticks(5)

	const valueline = d3.line()
	.x(d => x(d.date))
	.y(d => y(d.close))

	const svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', `translate(${margin.left}, ${margin.top})`)


	let currentData = 'data1'
	const data = data1
	// 设置比例尺的范围
	x.domain(d3.extent(data, d => d.date))
	y.domain([0, d3.max(data, d => d.close)])

	// 添加折线
	svg.append('path')
	.attr('class', 'line')
	.attr('d', valueline(data))

	// 添加x轴
	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', `translate(0, ${height})`)
	.call(xAxis)

	// 添加y轴
	svg.append('g')
	.attr('class', 'y axis')
	.call(yAxis)

	// 更新数据
	function updateData() {

	let data = []
	if (currentData == 'data1') {
	data = data2
	currentData = 'data2'
	} else {
	data = data1
	currentData = 'data1'
	}

	// 重置x轴和y轴比例尺
	x.domain(d3.extent(data, d => d.date))
	y.domain([0, d3.max(data, d => d.close)])

	const svg = d3.select('body').transition()

	// 更新折线
	svg.select('.line')
	.duration(750)
	.attr('d', valueline(data))

	// 更新x轴
	svg.select('.x.axis')
	.duration(750)
	.call(xAxis)

	// 更新y轴
	svg.select('.y.axis')
	.duration(750)
	.call(yAxis)
	}

	</script>
	</body>