JavaScript notes

时间：2021-05-16 19:22:16 阅读：30 评论：0 收藏：0 [点我收藏+]

CSS

selector: tag, .class, #id

JavaScript

var vs let

Main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

d3

基础

//选中HTML元素
selection = d3.select(selector)//只选第一个
selection = d3.selectAll(selector)

//改变选中的元素
selection.text("new string")
selection.html("<b>new</b> string")
selection.attr(attr,value)
selection.style(attr,value)

//添加删除元素
selection.append(tag)  .text(‘haha‘)

加载数据

d3.csv(dataURL)
  .then(callback)
  .catch(errorHandler)

//filtering and sorting
array.filter(func) //return a new list
array.sort(comparator)//in-place
//comparator example:
function (a,b){if a<b return -1  / 1 /0}

array.map(func)

array.reduce(reducer, initialValue)

d3.max(data[,accessor])//min sum mean

binding data

let sel = d3.selectAll("li").data(data)
sel //update
sel.enter()
sel.exit()  .remove()

//numeric scale
d3.scaleLinear().domain(domainExtent).range(rangeExtent)
d3.scaleSqrt().domain(domainExtent).range(rangeExtent)
d3.scaleOrdinal().domain(domain).range(range)

Draw line

svg 有个path比较强大，有专门语法。d3可以帮我们转换成path的语法

d3.line().x(function).y(function)

//pie/donut chart
let arcGenerator = d3.arc()
let pieGen = d3.pie().value( d=> d.price)
let arcData = pieGen(data).attr("d", arcGenerator )

Interaction


slection.on(event, handlerFunction)

//arrow funtion 不能用this
() => {}
//function function可以用this
function () {}

//选择的例子
body.selectAll("circle")
  .on("click", function(d){
    if(d3.event.shiftKey){
      this.style.fill = "blue"
    }
})

//鼠标晃过变色嗯例子
join.enter()
  .append(‘rect‘)
  .style(‘fill‘, ‘blue‘)
  .style(‘stroke‘, ‘white‘)
  .attr(width, height, ...)
  .attr(‘transform‘, d => `translate ${scalePosition(d.height)}`)
  .on(‘click‘, d => { 
     d3.select(‘#details‘).text(d.name)
   })
  .on(‘mouseover‘, function() => {
     this.style.fill = ‘red‘ 
  })
  .on(‘mouseout‘, function() => {
     this.style.fill = ‘blue‘ 
  })

//mousemove  rule barchart