数据可视化D3学习笔记（二）JS简介与操控SVG

一、JS简介

        js中的很多语法与操作与c、c++都很相似，在此默认已经有了一定的编程语言基础，仅介绍一些js的特性内容。

        1.变量声明不需要指定类型，即不需要使用int double等

        一般声明需要用到的是：let  var  const

        2.函数定义同样不需要指定类型

        常见的函数表现形式有：

   function abc(a){return a+5;}

   const f = datum => datum.value        //datum相当于函数的参数

   const p = function(a,b){return a+b;}

   let myFunction = (a,b) => a+b

        尤其是第二种与第四种，是在d3中非常常见的一种函数的定义方式。

        3.一个变量也可以是一个函数

const myFunction = function(a,b){return a+b;}

        因此函数也可以作为变量输入

setTimeout(function(){
        console.log('Hello world')
        },1000)

        此段代码的意思是，1000ms后将Hello world输出。

二、js中d3常用的接口

        d3.js经常读取csv文件，届时会涉及大量的数组、对象的操作。

        1.数组

        a = [1,2,3]

        2.对象

        a = {name:'mmm',age:123,class:2}

        3.数组的排序

        a.sort()

        4.数组的查询

a.find(d => d.name === 'Wen-Yang')

        5.把字符串转换成数值+(‘3.14’)

三、SVG

        1.使用d3查询SVG

        ①根据id查找（包括group的id）

d3.select('#rect1')

        其表示查询id为rect1的元素，使用#

        ②根据class查询

d3.selectAll('.class1')

        其表示查询class1内的所有的元素，使用.

        ③根据标签查询

d3.selectAll('rect')

        其表示查询所有标签为rect的元素，使用时前面无需加其他符号

        ④层级查询

d3.select('#maingroup rect')
d3.selectAll('#secondgroup rect')
d3.selectAll('.class rect1')

        2.使用d3设置SVG中的属性

        ①常见的属性

        id、class（特殊的属性，可以使用.attr设置）

        x、y、cx、cy  (其中cx、cy用于设置圆心坐标)

        fill、stroke

        height、width、r

        transform->translate、rotate、scale

        ②遇到不认识或想要设置其他属性，可查询https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attributehttps://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute

         3.使用d3添加&删除元素

        ①添加元素

        element.append()

const myRect = d3.select('#mainsvg').append('g').attr('x','100')

        ②删除元素

        element.remove()

        使用时会移除整个标签，需要小心

四、SVG比例尺

        1.线性比例尺

const xScale = d3.scaleLinear()
.domain([min_d,max_d])
.range([min,max]);

const xScale = d3.scaleLinear()
.domain([0,data.datum=>datum.value])
.range([0,innerWidth]);

         2.条带比例尺（针对离散的数据）

const yScale = d3.scaleBand()
.domain(list)
.range([min,max])
.padding(p);

const yScale = d3.scaleBand()
.domain(data.map(datum=>datum.name))
.range([0,innerHeight])
.padding(0.1)