3d建模 大数据可视化教程 d3js大数据可视化

D3.js，也叫 D3，表示数据驱动文档。

D3 是一个在浏览器里创建动态可视化数据的 JavaScript 库。它基于 web 标准，即 HTML、CSS 和 SVG 技术。

D3 获取输入数据并且映射到相应的可视化内容里。它支持不同的数据格式。

D3 允许将数据绑定到 DOM 上。你可以使用 D3 的内建方法通过 HMTL 或者 SVG 元素实现数据可视化。

D3 提供了大量控制数据的方法。

1.用D3给文档添加元素。
首先要选择select（）这个标签元素，可用链式向标签里添加html节点append（），在往节点添加文本text（）,
全选 d3.selectAll(“li”).text(‘list item’)，选择所有的li标签，将其文本改为list item。
2.使用D3中的数据。

const dataset = [12, 31, 22];
d3.select('body').selectAll('h2').data(dataset).enter().append('h2').text('New Title')
选择不存在的 h2 元素。事实上，这段代码先选择页面上的 body元素，再选择所有的h2，它将返回空。
然后data()方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。
enter()方法发现页面中没有 h2 元素，但是需要 3 个（每个对应dataset中的一个对象）。
它将在body中添加带有文本 "New item" 的 h2 元素。

D3的动态数据。
d3.select('body').selectAll('h2').data(dataset).enter().append('h2').text(m=> (m+'nnn'))

d3.select('body').selectAll('h2').data(dataset).enter().append('h2').text(m=> (m+'nnn')).style('color','red')

3.给元素添加内联样式。就如上

4.根据数据更改样式

d3.select('body').selectAll('h2').data(dataset).enter().append('h2').text(m=> (m+'nnn')).style('color',d=>{
 if(d<20){return 'red'}
})

5.用D3添加样式 。~.attr(‘class’,‘red’)
6.动态更新元素的高度。 ~.style(“height”,d=>d+“px”)
7.了解 D3 中的 SVG.

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    const w = 500;
    const h = 100;
    const svg = d3.select("body")
                .append('svg')
                .style('height',h)//attr
                .style('weight',w) //attr

8.用svg显示形状。在svg区域中创建图形。SVG 支持多种图形，比如矩形和圆形，并用它们来显示数据。例如，在条形图中一个矩形（rect ）SVG 图形可以创建一个组。SVG 的rect有四个属性。x和y坐标指定图形放在svg区域的位置，height和width指定图形大小。
rect元素和div有一些不同，rect必须添加在svg元素内，而不能直接添加在body内。同时，你需要告诉 D3 将rect放在svg区域的哪个位置。
rect图形用fill属性着色, ~.attr(“fill”, ‘red’)

const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    const w = 500;
    const h = 100;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
                  .append('rect')
                  .attr("width", 25)
                  .attr("height", 100)
                  .attr("x", 0)
                  .attr("y", 10)
  或者
   const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h)
 svg.selectAll("rect").data(dataset).enter().append('rect')
   				  .attr("fill", 'red')
                  .attr("width", 25)
                  .attr("height", (d,i)=>{return d*3})
                  .attr("x", (d,i)=>{return i*30})
                  .attr("y", 10)
                  //8888反转svg//.attr('y',(d,i)=>h-3*d)
   d 指的是数据，dataset，而i指的是索引
   //9999添加标签
   svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => h - 3 * d-3) //-3 意思向上偏移
       .text(d=>d)//dataset
   //11111  添加title节点      
   svg.selectAll("title")
       .data(dataset)
       .enter()
       .append("title")
       .text((d) => d)

8.反转svg，y坐标为y = heightOfSVG - heightOfBar会将条形图向上放置。例如上代码
9.给D3元素添加标签。（柱状图 的标注），例如上代码
10.添加悬停效果。 先给rect添加class类，然后.bar:hover { fill: brown;}
11.添加title节点，例如上代码

12 .使用svg创建闪点图，Circles。他和rect条形图很类似。
但是数据应该是坐标，数组形式。柱状图有两个坐标x，y。但是闪点图有三个，cx-坐标的第一个数，cy- 坐标的第一个数，r-点的半径。

const dataset = [[ 34, 78 ],  [ 109,280 ], [ 310, 120 ],];  
    const w = 500;
    const h = 500;
    const svg = d3.select("body").append("svg").attr("width", w).attr("height", h); 
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", d=>d[0])
       .attr("cy", d=>d[0])
       .attr("r", 1)

13 .用D3创建线性比例。如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。D3 中，比例尺可帮助布局数据。Scales是告诉程序如何将一组原始数据点映射到 SVG 画布上像素的函数。
D3 有几种缩放类型。对于线性缩放（通常使用于定量数据），使用 D3 的scaleLinear()方法：
可以按比例设置域和范围。
缩放的输入信息，domain。
输入信息-范围range。
简单来讲就是 将输入信息 --映射 --输出信息

const scale = d3.scaleLinear().domain([250,500]).range([10,150])
    const output = scale(500);输入500的话就对应10-150的150.
    d3.select("body")
      .append("h2")
      .text(output);
找出最大值  或最小值min()和max()
const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
const output = d3.max(positionData, (d) => d[2]);
d3.select("body")
      .append("h2")
      .text(output);

14.根据数据集，设置比例尺，再画出适合svg容器的宽和高。并且添加到坐标轴，D3 有两种方法来渲染 y 轴和 x 轴，分别是axisLeft和axisBottom。const xAxis = d3.axisBottom(xScale);const yAxis = d3.axisLeft(yScale)

const dataset = [
                  [ 420,   220 ],
                  [ 233,   145 ],
                  [ 333,   96 ],
                  [ 222,    333 ],
                ];
    
    const w = 500;
    const h = 500;
    const padding = 30;
    const xScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[0])])
                     .range([padding, w - padding]);
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataset, (d) => d[1])])
                     .range([h - padding, padding]);
    
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr('cx',(d) => xScale(d[0]))
        .attr('cy',(d) => yScale(d[1]))
        .attr('r',10)
       .text(yScale(100))
 
    svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .text((d) =>  (d[0] + ", "
 + d[1]))
       .attr('x',(d) => xScale(d[0]+10))
        .attr('y',(d) => yScale(d[1]+10))
  const xAxis = d3.axisBottom(xScale);
    svg.append("g")
       .attr("transform", "translate(0," + (h - padding) + ")")
       .call(xAxis);
  const yAxis = d3.axisLeft(yScale)
     svg.append("g")
       .attr("transform", "translate(" + (  padding) + ",0)")
       .call(yAxis);