Shapes API

优质
小牛编辑
120浏览
2023-12-01

本章讨论D3.js中的不同形状生成器。

配置API (Configuring API)

您可以使用以下脚本配置Shapes API。

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>
</script>

形状生成器

D3.js支持不同的形状。 让我们详细介绍一下突出的形状。

Arcs API

电弧发生器产生圆形或环形。 我们在前面的饼图章节中使用了这些API方法。 让我们详细了解各种Arcs API方法。

  • d3.arc() - 此方法用于创建新的弧生成器。

  • arc(args) - 用于生成具有指定给定参数的弧。 具有对象半径和角度的默认设置定义如下。

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI/2
   });
</script>
  • arc.centroid(args) - 此方法用于计算具有指定参数的弧的中心线的中点[x,y]。

  • arc.innerRadius([radius]) - 此方法用于设置给定半径的内半径并返回一个弧生成器。 它定义如下 -

function innerRadius(d) {
   return d.innerRadius;
}
  • arc.outerRadius([radius]) - 此方法用于设置给定半径的外半径并返回一个弧生成器。 它的定义如下。

function outerRadius(d) {
   return d.outerRadius;
}
  • arc.cornerRadius([radius]) - 此方法用于设置给定半径的圆角半径并返回圆弧生成器。 它的定义如下。

function cornerRadius() {
   return 0;
}

如果拐角半径大于零,则使用给定半径的圆将圆弧的拐角倒圆。 角半径可能不大于(outerRadius - innerRadius)/ 2。

  • arc.startAngle([angle]) - 此方法用于从给定角度设置函数的起始角度。 它的定义如下 -

function startAngle(d) {
   return d.startAngle;
}
  • arc.endAngle([angle]) - 此方法用于从给定角度设置函数的结束角度。 它的定义如下。

function endAngle(d) {
   return d.endAngle;
}
  • arc.padAngle([angle]) - 此方法用于从给定角度设置垫片角度到函数。 它的定义如下。

function padAngle() {
   return d && d.padAngle;
}
  • (x) arc.padRadius([radius]) - 此方法用于将焊盘半径设置为给定半径的指定函数。 垫半径确定分隔相邻弧的固定线性距离,定义为padRadius * padAngle。

  • (xi) arc.context([context]) - 该方法用于设置上下文并返回一个弧生成器。

馅饼API

此API用于创建Pie生成器。 我们在前一章中已经执行了这些API方法。 我们将详细讨论所有这些方法。

  • d3.pie() - 使用默认设置构造一个新的饼图生成器。

  • pie(data[, arguments]) - 此方法用于为给定的数组值生成饼图。 它返回一个对象数组。 物体是基准的弧角。 每个对象都具有以下属性 -

    • data - 输入数据; 输入数据数组中的相应元素。

    • value - 弧的数值。

    • index - 弧的索引。

    • startAngle - 弧的起始角度。

    • endAngle - 弧的结束角度。

    • padAngle - 弧的垫角。

  • pie.value([value]) - 此方法用于将值设置为指定的函数并生成饼图。 它的定义如下 -

function value(d) {
   return d;
}
  • pie.sort([compare]) - 此方法用于将数据排序到指定的函数并生成饼图。 比较器功能定义如下。

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

这里,compare函数接受两个参数'a'和'b',每个元素来自输入数据数组。 如果'a'的弧应该在'b'的弧之前,那么比较器必须返回一个小于零的数字。 如果'a'的弧应该在'b'的弧之后,那么比较器必须返回一个大于零的数字。

  • pie.sortValues([compare]) - 此方法用于比较给定函数的值并生成饼图。 该功能定义如下。

function compare(a, b) {
   return b - a;
}
  • pie.startAngle([angle]) - 此方法用于将饼图的起始角度设置为指定的函数。 如果未指定角度,则返回当前的起始角度。 它的定义如下。

function startAngle() {
   return 0;
}
  • pie.endAngle([angle]) - 此方法用于将饼图的结束角度设置为指定的函数。 如果未指定角度,则返回当前结束角度。 它的定义如下。

function endAngle() {
   return 2 * Math.PI;
}
  • pie.padAngle([angle]) - 此方法用于将填充角度设置为指定的函数并生成饼图。 该功能定义如下。

function padAngle() {
   return 0;
}

Lines API

Lines API用于生成一条线。 我们在Graphs章节中使用了这些API方法。 让我们详细介绍每种方法。

  • d3.line() - 此方法用于创建新的线生成器。

  • line(data) - 此方法用于为给定的数据数组生成一行。

  • line.x([x]) - 此方法用于将x访问器设置为指定的函数并生成一行。 该功能定义如下,

function x(d) {
   return d[0];
}
  • line.y([y]) - 此方法用于设置指定函数的“y”访问器并生成一行。 该功能定义如下。

function y(d) {
   return d[1];
}
  • line.defined([defined]) - 此方法用于将已定义的访问者设置为指定的函数。 它的定义如下。

function defined() {
  return true;
}
  • line.curve([curve]) - 用于设置曲线并生成线。

  • line.context([context]) - 此方法用于设置上下文并生成一行。 如果未指定上下文,则返回null。

  • d3.lineRadial() - 此方法用于创建新的径向线; 它相当于笛卡尔线生成器。

  • lineRadial.radius([radius]) - 此方法用于绘制径向线,访问器返回半径。 它需要距离原点(0,0)的距离。

在下一章中,我们将了解D3.js中的Colors API。

最后更新:

类似资料

  • 视图移动以及缩放是一种将用户注意力聚焦在感兴趣区域的一种流行的交互技术。操作直接,容易理解: 点击并拖拽平移,使用滚轮进行缩放,当然也可以通过触摸进行。平移和缩放被广泛的应用在地图中,但是也可被应用到其他的可视化比如时间序列以及散点图中。 缩放行为通过 d3-zoom 模块实现,能方便且灵活到 selections 上。它处理了许多 Installing NPM 安装: npm install d

  • 这个模块实现了用来计算一组二维点 Voronoi diagram(泰森多边形) 或 Delaunay triangulation(德劳内三角剖分) 的 Steven J. Fortune’s algorithm 算法。这个模块的实现大多是基于 Raymond Hill 的工作。 泰森多边形不仅仅在视觉上具有吸引力,在交互方面也非常实用,比如在散点图中增加点的目标面积。参考 “Strikeouts

  • transition 是一个类 selection 的接口,用来对 DOM 进行动画修改。这种修改不是立即修改,而是在规定的事件内平滑过渡到目标状态。 应用过渡,首先要选中元素,然后调用 selection.transition,并且设置期望的改变,例如: d3.select("body") .transition() .style("background-color", "red")

  • 这个模块提供了一个高效的队列,能管理上千并发动画同时保证与并发或分段动画一致的同步时序。在内部使用 requestAnimationFrame 进行 fluid animation(如果支持的话),否则切换使用 setTimeout来实现。 Installing NPM 安装: npm install d3-timer. 此外还可以下载 latest release。也可以直接从 d3js.org

  • 在可视化时间序列数据、分析时间模式或处理一般时间时,常规时间单位的不规则性很快就变得明显起来。在 Gregorian calendar(公历) 中,大多数月份有 31 天但是有些月份只有 28 或者 29、30 天。大多数年份有 365 天但是 leap years(闰年) 有 366 天。在 daylight saving(夏令时) 中一天可能有 23 25 小时。更复杂的是世界各地的夏时制不同

  • 可视化通常由离散图形标记组成, 比如 symbols, arcs, lines 和 areas。虽然条形的矩形可以很容易的使用 SVG 或者 Canvas 来生成, 但是其他的比如圆形的扇形以及向心 Catmull-Rom 样条曲线就很复杂。这个模块提供了许多图形生成器以便使用。 与 D3 的其他特性一样,这些图形也是又数据驱动的: 每个图形生成器都暴露了一个如何将数据映射到可视化表现的访问器。例