美文网首页
第六章 d3形状

第六章 d3形状

作者: Doter | 来源:发表于2017-09-03 23:32 被阅读0次

d3.arc()

生成arc的path数据

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

d3.line()

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
];

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

line.curve()

d3.radialLine()

线条位于极坐标系中,标准线条中的xy对应radial线条中的angleradius

d3.area()

area.curve() 插值方式

d3.radialArea()

径向面积图处于极坐标中

Curves

在二维空间生成一个点序列用来绘制线条或面积图时,除了定位好的这些点外,剩下的工作就是如何将这些点连接起来以形成一个连续的线条或闭合的区域。连接方式有很多种。
线条通常不是直接构造的,而是将线条插值方式传递给line

var line = d3.line()
   .x(function(d) { return x(d.date); })
   .y(function(d) { return y(d.value); })
   .curve(d3.curveCatmullRom.alpha(0.5));

curveBasis 三次basis spline(B样条曲线)包含起止点

Custom Curves

Links

用于捆图等关系型

Symbols

Symbols提供了一些已定义的图形编码(符号),通常被用在散点图中。

相关文章

  • 第六章 d3形状

    d3.arc() 生成arc的path数据 d3.line() line.curve() d3.radialLin...

  • 每天认识一件文物|原来博物馆里的“钱”还会做鬼脸!!!

    每天认识一件文物D3 蚁鼻钱,楚国货币,是仿照天然海贝形状制作的金属铸币。出土的蚁鼻钱形状大同小异,轻重悬殊,大的...

  • 06-D3.js过渡动画

    D3提供了4个方法用于实现图形的过渡 transition 图形变化前后的状态(形状、位置、颜色等) durati...

  • d3.js

    D3是什么? D3: 是Data-Driven Documents(数据驱动文档)的简称。 D3(或D3.js) ...

  • Vue D3 力导向图

    1. 安装 前端工程根目录下执行 yarn add d3 ,安装 d3 依赖包。安装的版本 "d3": "^5...

  • d3基础知识

    h5: Angular ts文件:import * as d3 from 'd3'; ngOnInit(): ...

  • Explore D3

    d3 v5 Tech Stack ? Node Webpack D3 Installation ? Compile...

  • 2018-09-14_D3.js

    Data Visualization with D3 D3: SVG中的jQurey 1. Add Documen...

  • 区块链技术| Merkle Tree

    简介 默克尔树是一种二叉树(类似于松树的树冠形状)。 结构 D0 ~ D3存储数据的数据块,N0 ~ N3是D0 ...

  • 2019-03-30计算机二级

    '=VLOOKUP(D3,编号对照!$A$2:$C$19,2,FALSE) '=VLOOKUP(D3,编号对照!$...

网友评论

      本文标题:第六章 d3形状

      本文链接:https://www.haomeiwen.com/subject/czujjxtx.html