D3js-4-5

[dlrandy]

D3的layout可以用来创建复杂的数据可视化

默认的布局允许创建基本的图表的

不同的chart适用于不同的数据集

所有的图表都是几个图形元素构成的，这些元素来与自于描述的数据

D3里三种主要的函数类型：generators, components, layouts what they take -> Type and examples -> what they produce
DataPoint Generators SVG 的drawing Code
Array values [ area(), line(), arc() ] path元素的d属性

Functions Components Elements and event lisnter [ axis(), brush(), zoom ]

Whole dataset Layouts 带有datapoints图形布局属性的新注解的数据集 [ stack(), pie(), chord() ]

generators： 接受数据，返回SVG drawing code 来创建图形对象。可以认为是产生path元素的d属性，以及别的类似的吧 还不是很熟悉svg。

components： 接收函数，返回整个一组的图形对象

layouts： 接受一个或者多个数组数据，或者generators，然后动态或者静态的给数据追加属性来以特定的位置或者大小进行绘画。

对于坐标轴(components) ，可以使用selection.call(axis)来实现添加坐标轴。

var  xAxis = d3.axisBottom().scale(xScale);
d3.select('svg').append('g').attr('id', 'xAxisG').call(xAxis)
||
xAxis(d3.select('svg').append('g').attr('id','xAxisG'))

要想显示坐标轴(因为默认坐标轴不在 canvas里) ，就要设置它的transform属性。 一般的套路就是svg容器append一个g元素，然后调用call(axis)

从一些点画线 generator d3.line()这个genarator需要的值是有x，y两个组成。它有访问器.x(func), .y(func)

line.defined() 默认返回true，意味着每个数据点指示着line上的真实区域。它可以在线上画gap（间断）

[dlrandy]

d3.line()默认是有fill的，想要线得加stroke Attr

d3.line 默认是折线，如果想改变可以使用

var aLine = d3.line().x(d => xScale(d.day)).y(d => yScale(d.retweets));
 aLine.curve(d3.curveStep); //.curve(d3.curveCardinal); .curve(d3.curveBasis)

[dlrandy]

当图像超出坐标轴的时候，可以将domain的值取负

[dlrandy]

d3.area（）和d3.line一样可以划线， 但是还可以画区域，line的y，而area的则是y0, y1.

绘画filled path不仅仅能使用d3.area, 还可以使用d3.line,需要给d属性后添加‘Z’，来表明path是闭合的

在使用fill属性的时候，无论加不加Z都是一样填充的

一般我们会使用Object.keys来做一些重复的绘画操作

[dlrandy]

d3的Axis可以穿透(tickSize, ticks)整个canvas，比如，绘制Excel。当然得在没有translate的情况下

[dlrandy]

layout 函数可以帮助格式化数据，以至于数据可以通过图表方法描述出来

Layout 不会绘画，也不会像compoennts那样被调用，也不会像generators一样指向drawing code。他们只是一个预处理步骤--格式化数据，以至于数据可以根据你选择的方式展现出来

修改layout： 重新邦定修改的数据到图形对象上； 可以使用d3的enter，update，exit更新layout。

[dlrandy]

layout不会产生图表，它只是产生图表需要的一些设置。想要图表就需要一些额外的工作，但是提供了很大的灵活性创建一些其他库创建不了的图表。

d3.histogram接收一组数据，返回一组bin，每个bin是一个数组，同时还有x0, x1属性 thresholds用来装箱的， 根据inhisgram.value来判断放入到第几个bin,也就是0的时候放入到histogram.domain为0的bin里 https://github.com/d3/d3-array/blob/master/README.md#histogram-thresholds

histogram.domain([0, 5])的意思是bin的数组里应该有0-5个bin

[dlrandy]

d3.histogram接收一组数据，返回一组bin，每个bin是一个数组，同时还有x0, x1属性 x0 和x1的差值可作为宽度

[dlrandy]

histogram 的更新就是修改histogram的value，然后传递之前的 data，拿到format之后的data，然后选中所有的之前创建的图表元素，进行update注意设置可能 变化的属性。

之所以使用layout进行数据抽象，就是想可视化数据的方式比处理数据的方式多

var normal = d3.randomNormal()
var sample =d3.range(100).map(d => normal())

layout的核心作用之一就是更新数据，更新图表 所以需要做的就是改变数据 或者改变布局然后重新绑定数据到已经存在的图表元素。

[dlrandy]

使用layout进行update的时候，只需要重新设置layout的value方法；普通的方法更新的时候只需要过滤原数据。layout的key是在value方法后或者layout方法之后加入sort方法， 且一定要在最一开始的value的地方设置好。

在update 和exit做join的时候，一定不要忘记data函数的key方法。

transition没有处理好arc，所以需要你手动处理。需要使用attrTween

使用layout的套路： 1、process数据成layout需要的格式 2、设置layout的访问器函数排列数据集 3、使用layout格式化显示数据 4、发送修改的数据要么直接给元素要么和generator组合

[dlrandy]

使用了 layout之后想使用不同维度的数据更新数据表，并不需要移出最原始数据，可以使用layout重新格式化数据并重新邦定到最初的元素上

d3.randomNormal()()生成正常分布的随机数

生成一百个随机数 d3.range(100).map(d =>d3.randomNormal()() )

[dlrandy]

data-binding 默认的key是数组的位置，在layout measure data 的时候，它会按从大到小的顺序排序数据。而且在重新调用layout的时候，还是会进行排序的。取消sort可以使用layout.sort(null)

注意默认的transition不能够很好的 处理arc，可以使用attrTween

d3.selectAll("path")
          .transition()
            .duration(1000)
            .attrTween("d", arcTween);

        function arcTween(d) {
          return t => {
            var interpolateStartAngle = d3.interpolate(d.tweetsSlice.startAngle, d.retweetsSlice.startAngle);

            var interpolateEndAngle = d3.interpolate(d.tweetsSlice.endAngle, d.retweetsSlice.endAngle);
            d.startAngle = interpolateStartAngle(t);
            d.endAngle = interpolateEndAngle(t);
            return newArc(d);
          };
        }

attrTween接受一个函数，他接受当前的transition ，返回一个interpolated（撰改的）值

[dlrandy]

对于csv文件不要有多余的空格，会导致数据错误

stack layout的offset方法，会决定组成图标区域的相对位置；order方法决定绘画区域的顺序

[dlrandy]

D3的layout可以从适当格式化的数据里创建复杂的数据可视化

D3的component是一个函数，它会画出所有的图形元素；而generator则只是生成绘画 指令。

接受的数据 类型和例子 产生的数据 DataPoint Generators svg的path的d属性 Array Values area, line, arc

Function Components 元素和事件监听器 axis, brush, zoom

Whole Dataset Layouts 带有新的属性的注解数据集 stack, pie, chord

===================================================================

var xAxis = d3.axisBottom().scale(xScale)
d3.select('svg').append('g').attr('id', 'xAxisG').call(xAxis)