d3.js基础

本文引用 极客学院的d3基础教程 stroke 描边引用 csdn博客 d3 排行案例

1. 颜色

var c = d3.color('red') // {r, g, b, opacity} var c = d3.hsl('red') {h, s, l, opacity} c = c.brighter(1.5) // 1- 2 c = c.darker(3) var disable = c.displayable() var str = c+ '' //获取字符串 // ------- var i = d3.interpolate('red', 'green') // 间隔

2. 动画

var t = d3.transition() .duration(4000) .delay(200) d3.select('svg') .transition(t) // ----- 添加间隔 .attrTween[:styleTween]("fill", function() { return d3.interpolate("red", "blue"); }) // -----循环动画 svg.append('rect') .attr({ height: 200,width:400, fill: i(0) }) .transition(t) .attr('fill', i(1)) .on('start', function repeat() { d3.active(this) .attr('ry',0) .transition() .attr('ry',100) .transition() .on('start', repeat) })

3. d3添加文字

d3.select('svg').append('text') .text('测试api') .attr({ // 需要修改源码支持object输入 https://mp.csdn.net/postedit/102836592 x: 300,y:300,fill:'red', dx: 20, // 偏移 })

https://github.com/jackfrued/Python-100-Days