suoutsky / chart-note Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 11 KB

D3 demo及笔记

HTML 100.00%

chart-note's People

Stargazers

Watchers

chart-note's Issues

echart-多图自适应

let myChart = this.barChart;
window.addEventListener('resize', function() {
   myChart.resize();
});

svg-g元素

g元素：svg 中的元素用来组织svg元素。如果一组svg元素被g元素包裹了，你可以通过对g元素进行变换（transform），被g元素包裹的元素也将被变换，就好这些被svg包裹的元素是一个元素一样，和相比这是一个很好的优势，嵌套的svg中元素是不会被变换影响的。

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
     
    <g>
      <line x1="10" y1="10" x2="85" y2="10"
          style="stroke: #006600;"/>
 
      <rect x="10" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>
 
      <text x="10" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>
 
</svg>

g元素样式继承 , g元素的样式 会被那些包裹着的元素继承
g元组不支持定位属性 x和y 和元素相比，g元素不支持定位属性x和y，需要定位的时候可以用变换属性代替: transform="translate(x,y)

Selections(选择集) enter和exit操作

同时选择操作多个dom

d3.selectAll("p").style("color", "white");

动态属性

d3.selectAll("p").style("color", function(d, i) {
	return i % 2 ? "#fff" : "#eee";
});

这种通过匿名函数动态设置属性、样式值的方法常用来绑定数据。数据被定义在一个数组中，并且每一个数据值可以作为这个函数的参数，此外还有索引等参数，比如根据数据值设置不同的字体大小:

d3.selectAll("p")
	.data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

一旦为元素绑定数据之后，后续如果需要操作就不需要重新绑定,D3会搜索已经绑定的数据。也就是可以一次绑定，多次使用。

enter和exit操作

如果数据元素多于DOM个数时用enter，如果数据元素少于DOM元素，则用exit

数据元素个数多于DOM元素个数
数据元素与DOM元素个数一样
数据元素个数少于DOM元素个数

svg-矩形

SVG Shapes

矩形（ect）
圆形 (circle)
椭圆 (ellipse)
线 (line)
折线 (polyline)
多边形 (polygon)
路径 (path)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度

style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;"
  stroke-opacity:0.9"/>
</svg>

svg透明度

CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>

rx 和 ry 属性可使矩形产生圆角

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5;"/>
</svg>

Histograms 直方图

直方图可以将一些离散的样本统计映射到连续的空间，并且这种映射是非重叠的。直方图经常用来对一系列数值分布空间进行可视化。

d3.histogram()

使用默认的设置创建一个直方图生成器.

histogram(data)

根据给定的数据样品计算对应的直方图。返回一个bins(纵向柱子)数组，每个bin都包含了与输入数据相关联的元素。bin的length属性表示这个bin里包含的元素个数，每个bin包含两个属性:

x0 - bin的下界 (包含).
x1 - bin的上界 (不包含,最后一个bin除外).

histogram.value([value])

如果指定了value，则为直方图设置值访问器并返回直方图生成器。如果value没有指定，则返回当前的值访问器。
当生成直方图时, 值访问器会在数据的每个元素上调用，并传递当前的元素 d, 索引 i, 以及原始数据 data . 默认的值访问器是假设输入数据是可以排序的(比如数值类型和日期类型)，如果原始数据不能直接排序，则需要设置值访问器，并在访问器内部返回一个可排序的值。

histogram.domain([domain])

如果指定了domain则设置直方图的输入范围，这个值是一个[min,max]数组，表示直方图可取的最小值和最大值，如果生成的数据某个元素的值超出这个范围，则忽略这个元素。

如果直方图与线性比例尺 x 结合使用时，则需要进行如下设置:

var histogram = d3.histogram()
    .domain(x.domain())
    .thresholds(x.ticks(20));

var bins = histogram(numbers);

domian访问器是被生成后的bins数组调用，而不是原始数据。

echart-chartMixins

import echarts from 'echarts';
export default {
  ready() {
    this.barChart = echarts.init(document.getElementById(this.chartId));
  },
  methods: {
    renderChart(obj) {
      /* 活动维度  和 活动+广告位 ， 活动+媒体 维度， 没有 广告位访问(UV) 数据，不展示此数据 */
      let renderData = [].concat(obj);
      if (!this.isShowSdkUv && this.selectDimension === 'visit') {
        renderData.splice(4, 1);
      }
      /* 左侧柱状图朝左显示 */
      if (this.isLeftChart) {
        renderData.forEach((item) => {
          item.data[0] = -item.data[0];
        });
      }
      this.barChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let name = params.seriesName;
            let showPercent = this.percent[params.seriesIndex] + '%';
            let tpl = name + '<br/>' + this._fixNum(Math.abs(params.data)) + '(' + showPercent + ')';
            return tpl;
          }
        },
        legend: {
          data: renderData.map(k => k.name)
        },
        grid: {
          top: '4%',
          left: '16%',
          right: '12%',
          bottom: '3%',
          containLabel: false
        },
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: false,
          axisLine: {show: false},
          axisLabel: {show: false},
          axisTick: {show: false}
        },
        yAxis: {
          type: 'category',
          axisLine: {show: false},
          axisLabel: {show: false},
          axisTick: {show: false},
          splitLine: {show: false},
          position: 'right',
          data: [this.selectDimension]
        },
        series: renderData
      }, true);
      let myChart = this.barChart;
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    }
  }
};

根据数据元素动态的修改DOM元素

// Update 情形2
var p = d3.select("body")
	.selectAll("p")
	.data([4, 8, 15, 16, 23, 42])
	.text(function(d) { return d; });      

// Enter 情形1
p.enter().append("p")
    .text(function(d) { return d; });

// Exit 情形3
	p.exit().remove();

有了这三种操作，就可以自由的根据数据元素动态的修改DOM元素了。