JavaScript notes

Chrome debug

We can inspect this in Google Chrome by right clicking on an element, choosing ‘Inspect’ and typing:
in the debug console. ( $0 represents the element that’s being inspected.)
查看d3绑定的data：$0.__data__

jQuery

//select
$('#search-query')[0].value  # HTML style of reading content。跟d3不一样， jQ select 一次取所有
$('#search-query').val()  # jQ style 读取val
$('#search-query').val('haha')#设置

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).

svg 属性

遇到不认识or想要设置某个属性，一定要查阅
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

• transform -> translate, rotate, scale

selection.attr(‘attrbuteName’, ‘value’)
• 支持直接通过值来设置属性
• 支持通过函数来设置属性

selection.attr(‘attrbuteName’, (d, i) => {...})
• d为绑定给图元的数据(即将到来)
• i为图元的索引，是一个整数，如d3.selectAll(‘rect’)中的第几个矩形
• 函数也可以仅使用 d => {...}，但此时函数体无法使用索引
• 即使不使用绑定的数据(如没有绑定数据)，如需使用索引，仍需要完 整的写出 (d, i) => {...}

d3

基础

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

//基于层级的查询:
d3.select(‘#maingroup rect’)
d3.selectAll('.tick text’)
d3.selectAll(‘#secondgroup rect’)

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

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

element.remove() • 请小心使用
• 会移除整个标签
• 在debug的过程中可以考虑使用’opacity’属性hack出移除的效果 • element.attr(‘opacity’, ‘0’)

加载数据

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

join统治下的进改出入门：
https://www.d3indepth.com/enterexit/

更丰满点的例子：
https://observablehq.com/@thetylerwolf/day-18-join-enter-update-exit

.join(
  function(enter) {
    ...
  },
  function(update) {
    ...
  },
  function(exit) {
    ...
  }
)

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

Brush

用于选择。比如鼠标拖方块选择
https://www.d3-graph-gallery.com/graph/interactivity_brush.html

Tooltip

浮动的小块显示信息
https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html

Linked Views

同一份数据，不同的看法