Axis API

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

D3提供绘制轴的功能。 轴由线,刻度线和标签组成。 轴使用“缩放”,因此需要为每个轴指定一个缩放比例。

配置Axis API

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

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

Axis API方法

D3提供以下绘制轴的重要功能。 它们简要描述如下。

  • d3.axisTop() - 此方法用于创建顶部水平轴。

  • d3.axisRight() - 此方法用于创建垂直的右向轴。

  • d3.axisBottom() - 此方法用于创建底部水平轴。

  • d3.axisLeft() - 它创建左垂直轴。

工作示例 (Working Example)

让我们学习如何将x和y轴添加到图形中。 为此,我们需要遵循以下步骤。

Step 1 - Define variables - 使用以下代码定义SVG和数据变量。

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 2 - Create a scale linear function - 为x轴和y轴创建比例线性函数,如下所述。

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);
var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

在这里,我们创建了一个线性比例并指定了域和范围。

Step 3 - Add scales to x-axis - 现在,我们可以使用以下代码将比例添加到x轴。

var x_axis = d3.axisBottom()
   .scale(xscale);

在这里,我们使用d3.axisBottom创建我们的x轴并为其提供之前定义的比例。

Step 4 - Add scales to the y-axis - 使用以下代码将比例添加到y轴。

var y_axis = d3.axisLeft()
   .scale(yscale);

在这里,我们使用d3.axisLeft创建我们的y轴并为其提供我们在上面定义的比例。

Step 5 - Apply transformation - 您可以追加组元素并插入x,y轴,这将在下面定义。

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

Step 6 - Append group elements - 使用以下代码应用转换和组元素。

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

Step 7 - Working Example - 完整的代码清单在以下代码块中给出。 创建一个网页axes.html并添加以下更改。

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>
   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
         var x_axis = d3.axisBottom().scale(xscale);
         var y_axis = d3.axisLeft().scale(yscale);
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         var xAxisTranslate = height/2 + 10;
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

现在,请求浏览器,我们将看到以下更改。

最后更新:

类似资料

  • 视图移动以及缩放是一种将用户注意力聚焦在感兴趣区域的一种流行的交互技术。操作直接,容易理解: 点击并拖拽平移,使用滚轮进行缩放,当然也可以通过触摸进行。平移和缩放被广泛的应用在地图中,但是也可被应用到其他的可视化比如时间序列以及散点图中。 缩放行为通过 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 的其他特性一样,这些图形也是又数据驱动的: 每个图形生成器都暴露了一个如何将数据映射到可视化表现的访问器。例