ckinmind/README.md

## README.md

      
    Raw
  

              README.md
            
          
    说明


图表类型：other
原图地址：Chained Transitions
备注：对于插值器还是没有很好的理解

知识点


d3.active - 对于一个给定的节点选择活跃中的过渡
d3.interpolateRgb(a, b) 插补RGB颜色
关于start事件


## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>

    body {
        max-width: 960px;
        margin: 1px;
    }

    div {
        width: 10px;
        height: 10px;
        margin: 1px 0 0 1px;
        float: left;
        background: #eee;
        display: inline-block;
    }

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

  const n = 4002

  // d3.interpolateRgb(a, b) 插补RGB颜色, Returns an RGB color space interpolator between the two colors a and b
  const whiteblue = d3.interpolateRgb('#eee', 'steelblue'),
    blueorange = d3.interpolateRgb('steelblue', 'orange'),
    orangewhite = d3.interpolateRgb('orange', '#eee')


  // transition.styleTween - 使用自定义插值器过渡样式
  d3.select('body')
    .selectAll('div')
    .data(d3.range(n))
    .enter()
    .append('div')
    .transition()
    .delay((d, i) => i + Math.random() * n / 4)
    .ease(d3.easeLinear)
    .on('start', function repeat() {
      d3.active(this)
        .styleTween('background-color', () => whiteblue)  // 这里进行灰色到蓝色的过渡
        .transition()
        .delay(1000)
        .styleTween('background-color', () =>  blueorange) // 这里进行蓝色到黄色的过渡
        .transition()
        .delay(1000)
        .styleTween('background-color', () => orangewhite) // 这里进行黄色到灰色的过渡
        .transition()
        .delay(n)
        .on('start', repeat)
    })

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<style>

	body {
	max-width: 960px;
	margin: 1px;
	}

	div {
	width: 10px;
	height: 10px;
	margin: 1px 0 0 1px;
	float: left;
	background: #eee;
	display: inline-block;
	}

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

	const n = 4002

	// d3.interpolateRgb(a, b) 插补RGB颜色, Returns an RGB color space interpolator between the two colors a and b
	const whiteblue = d3.interpolateRgb('#eee', 'steelblue'),
	blueorange = d3.interpolateRgb('steelblue', 'orange'),
	orangewhite = d3.interpolateRgb('orange', '#eee')


	// transition.styleTween - 使用自定义插值器过渡样式
	d3.select('body')
	.selectAll('div')
	.data(d3.range(n))
	.enter()
	.append('div')
	.transition()
	.delay((d, i) => i + Math.random() * n / 4)
	.ease(d3.easeLinear)
	.on('start', function repeat() {
	d3.active(this)
	.styleTween('background-color', () => whiteblue) // 这里进行灰色到蓝色的过渡
	.transition()
	.delay(1000)
	.styleTween('background-color', () => blueorange) // 这里进行蓝色到黄色的过渡
	.transition()
	.delay(1000)
	.styleTween('background-color', () => orangewhite) // 这里进行黄色到灰色的过渡
	.transition()
	.delay(n)
	.on('start', repeat)
	})

	</script>