JavaScript notes

Posted 2021-05-16 likeatree

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript notes相关的知识，希望对你有一定的参考价值。

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