搜索图片
≡
首页 ChatGPT Python3 Java HTM5 CSS SpringBoot JavaScript Vue Jquery
D3JS教程
D3.js 简介D3.js 安装D3.js 概念D3.js 数据连接D3.js SVG 简介D3.js SVG 转换D3.js 过渡D3.js 动画D3.js 绘制图表D3.js 图表D3.js 地理D3.js 数组 APID3.js 集合 APID3.js 选择 APID3.js 路径 APID3.js 缩放 APID3.js 轴 APID3.js 形状 APID3.js (color) APID3.js 转换 APID3.js 拖动 APID3.js 缩放 APID3.js 请求 APID3.js 分隔符分隔值 APID3.js 定时器 APID3.js 工作示例
<< D3.js 动画 D3.js 图表 >>

D3.js 绘制图表

D3.js 用于创建静态 SVG 图表。它有助于绘制以下图表-
条形图 圆形图 饼图 圆环图 折线图 气泡图等
本章介绍了如何在 D3 中绘制图表。让我们详细了解其中的每一个。

条形图

条形图是最常用的图形类型之一，用于显示和比较不同离散类别或组的数量、频率或其他度量（例如平均值）。该图的构建方式使得不同条形的高度或长度与其所代表的类别的大小成正比。
x 轴（水平轴）代表它没有刻度的不同类别。 y 轴（垂直轴）确实有一个刻度，这表示测量单位。根据类别的数量和类别的长度或复杂性，可以垂直或水平绘制条形。

绘制条形图

让我们使用 D3 在 SVG 中创建条形图。在这个例子中，我们可以使用 rect 元素 作为条形，使用 text 元素 来显示与条形相对应的数据值。
要使用 D3 在 SVG 中创建条形图，让我们按照以下步骤操作。
步骤 1- 在 rect 元素中添加样式-让我们将以下样式添加到 rect 元素中。 
svg rect {
   fill: gray;
}
步骤 2- 在文本元素中添加样式-添加以下 CSS 类以将样式应用于文本值。将此样式添加到 SVG 文本元素。它定义如下- 
svg text {
   fill: yellow;
   font: 12px sans-serif;
   text-anchor: end;
}
此处，Fill 用于应用颜色。文本锚用于将文本定位到条形的右端。
步骤 3- 定义变量-让我们在脚本中添加变量。下面解释一下。 
<script>
   var data = [10, 5, 12, 15];
   var width = 300,
      scaleFactor = 20,
      barHeight = 30;
</script>
这里，
Width-SVG 的宽度。 Scalefactor-缩放到屏幕上可见的像素值。 Barheight-这是水平条的静态高度。
步骤 4- 附加 SVG 元素-让我们使用以下代码在 D3 中附加 SVG 元素。 
var graph = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);
在这里，我们将首先选择文档正文，创建一个新的 SVG 元素，然后附加它。我们将在此 SVG 元素中构建条形图。然后，设置SVG的宽度和高度。高度的计算方式为条形高度 * 数据值的数量。
我们取条形高度为 30，数据数组长度为 4、那么 SVG 高度计算为 barheight* datalength，即 120 px。
步骤 5- 应用转换-让我们使用以下代码在 bar 中应用转换。 
var bar = graph.selectAll("g") 
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0," + i * barHeight + ")";
   });
这里，里面的每个条形对应一个元素。因此，我们创建组元素。我们的每个组元素都需要一个放置在另一个下方以构建水平条形图。让我们取一个转换公式 index * bar height。
步骤 6- 将 rect 元素附加到栏-在上一步中，我们附加了组元素。现在使用以下代码将 rect 元素添加到栏中。 
bar.append("rect")
   .attr("width", function(d) {
      return d * scaleFactor;
   })
   .attr("height", barHeight-1);
这里，宽度是（数据值 * 比例因子），高度是（条形高度-边距）。
步骤 7- 显示数据-这是最后一步。让我们使用以下代码在每个条形图上显示数据。 
bar.append("text")
   .attr("x", function(d) { return (d*scaleFactor); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });
这里，宽度定义为（数据值 * 比例因子）。文本元素不支持填充或边距。为此，我们需要给它一个"dy"偏移量。这用于垂直对齐文本。
步骤 8- 工作示例-完整的代码清单显示在以下代码块中。创建一个网页 barcharts.html 并添加以下更改。
barcharts.html 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg rect {
            fill: gray;
         }
         
         svg text {
            fill: yellow;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>
   <body>
      <script>
         var data = [10, 5, 12, 15];
         
         var width = 300 
            scaleFactor = 20, 
            barHeight = 30;
         
         var graph = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var bar = graph.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0," + i * barHeight + ")";
            });
         bar.append("rect").attr("width", function(d) {
            return d * scaleFactor;
         })
         
         .attr("height", barHeight-1);
         
         bar.append("text")
            .attr("x", function(d) { return (d*scaleFactor); })
            .attr("y", barHeight / 2)
            .attr("dy", ".35em")
            .text(function(d) { return d; });
      </script>
   </body>
</html>
现在请求您的浏览器，您将看到以下响应。

圆图

圆形图是一种圆形统计图形，它被分成多个切片以说明数字比例。

绘制圆图

让我们使用 D3 在 SVG 中创建一个圆图。为此，我们必须遵守以下步骤-
步骤 1- 定义变量-让我们在脚本中添加变量。它显示在下面的代码块中。 
<script>
   var width = 400;
   var height = 400;
   var data = [10, 20, 30];
   var colors = ['green', 'purple', 'yellow'];
</script>
这里，
Width-SVG 的宽度。 高度-SVG 的高度。 数据-数据元素数组。 颜色-将颜色应用于圆形元素。
步骤 2- 附加 SVG 元素-让我们使用以下代码在 D3 中附加 SVG 元素。 
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);
步骤 3- 应用转换-让我们使用以下代码在 SVG 中应用转换。 
var g = svg.selectAll("g")
   .data(data)
   .enter()
   .append("g")
   .attr("transform", function(d, i) {
      return "translate(0,0)";
   })
这里，
var g = svg.selectAll("g")-创建组元素来保存圆圈。
.data(data)-将我们的数据数组绑定到组元素。
.enter()-为我们的组元素创建占位符。
.append("g")-将组元素附加到我们的页面。 
.attr("transform", function(d, i) {
   return "translate(0,0)";
})
此处，translate 用于相对于原点定位元素。
步骤 4- 附加圆元素-现在，使用以下代码将圆元素附加到组中。 
g.append("circle")
现在，使用以下代码将属性添加到组中。 
.attr("cx", function(d, i) {
   return i*75 + 50;
})
这里，我们使用每个圆的中心的 x 坐标。我们将圆的索引乘以 75，并在圆之间添加 50 的填充。
接下来，我们设置每个圆心的 y 坐标。这用于统一所有圆，其定义如下。 
.attr("cy", function(d, i) {
   return 75;
})
接下来，设置每个圆的半径。定义如下， 
.attr("r", function(d) {
   return d*1.5;
})
此处，半径乘以数据值以及常数"1.5"以增加圆的大小。最后，使用以下代码为每个圆填充颜色。 
.attr("fill", function(d, i){
   return colors[i];
})
步骤 5- 显示数据-这是最后一步。让我们使用以下代码显示每个圆上的数据。 
g.append("text")
   .attr("x", function(d, i) {
      return i * 75 + 25;
   })
   .attr("y", 80)
   .attr("stroke", "teal")
   .attr("font-size", "10px")
   .attr("font-family", "sans-serif")
   .text(function(d) {
      return d;
   });
步骤 6- 工作示例-完整的代码清单显示在以下代码块中。创建一个网页 circlecharts.html 并在其中添加以下更改。
circlecharts.html 
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <script>
         var width = 400;
         
         var height = 400;
         
         var data = [10, 20, 30];
         
         var colors = ['green', 'purple', 'yellow'];
         
         var svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })
         
         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })
         
         .attr("cy", function(d, i) {
            return 75;
         })
  
         .attr("r", function(d) {
            return d*1.5;
         })
         
         .attr("fill", function(d, i){
            return colors[i];
         })
         
         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })
         
         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("font-size", "10px")
         .attr("font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</html>
现在，请求您的浏览器，以下将是响应。

饼图

饼图是圆形统计图。它被分成切片以显示数字比例。让我们了解如何在 D3 中创建饼图。

绘制饼图

在开始绘制饼图之前，我们需要了解以下两种方法-
d3.arc() 方法和 d3.pie() 方法。
让我们详细了解这两种方法。
d3.arc() 方法-d3.arc() 方法生成一个弧。您需要为圆弧设置内半径和外半径。如果内半径为 0，则结​​果将是饼图，否则结果将是圆环图，这将在下一节讨论。
d3.pie()Method-d3.pie() 方法用于生成饼图。它从数据集中获取数据并计算饼图每个楔形的起始角度和结束角度。
让我们使用以下步骤绘制饼图。
步骤 1- 应用样式-让我们将以下样式应用到弧元素。 
.arc text {
   font: 12px arial;
   text-anchor: middle;
}
.arc path {
   stroke: #fff;
}
.title {
   fill: green;
   font-weight: italic;
}
这里，fill 用于应用颜色。文本锚用于将文本定位到圆弧的中心。
步骤 2- 定义变量-在脚本中定义变量，如下所示。 
<script>
   var svg = d3.select("svg"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      radius = Math.min(width, height) / 2;
</script>
这里，
Width-SVG 的宽度。 高度-SVG 的高度。 Radius-可以使用 Math.min(width, height)/2 的函数计算；
步骤 3- 应用转换-使用以下代码在 SVG 中应用以下转换。 
var g = svg.append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
现在使用 d3.scaleOrdinal 函数添加颜色，如下所示。 
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);
步骤 4- 生成饼图-现在，使用下面给出的函数生成饼图。 
var pie = d3.pie()
   .value(function(d) { return d.percent; });
在这里，您可以绘制百分比值。需要匿名函数来返回 d.percent 并将其设置为饼值。
第 5 步- 为饼形定义圆弧-生成饼图后，现在使用下面给出的函数为每个饼形定义圆弧。 
var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(0);
在这里，这个弧将被设置为路径元素。计算出的半径设置为outerradius，而innerradius设置为0。
步骤 6- 在楔形中添加标签-通过提供半径在饼形楔形中添加标签。其定义如下。 
var label = d3
   .arc()
   .outerRadius(radius)
   .innerRadius(radius-80);
步骤 7- 读取数据-这是重要的一步。我们可以使用下面给出的函数读取数据。 
d3.csv("populations.csv", function(error, data) {
   if (error) {
      throw error;
   }
});
此处， populations.csv 包含数据文件。 d3.csv 函数从数据集中读取数据。如果数据不存在，则会引发错误。我们可以将此文件包含在您的 D3 路径中。
步骤 8- 加载数据-下一步是使用以下代码加载数据。 
var arc = g.selectAll(".arc")
   .data(pie(data))
   .enter()
   .append("g")
   .attr("class", "arc");
在这里，我们可以将数据分配给数据集中每个数据值的组元素。
第 9 步- 附加路径-现在，附加路径并将类"弧"分配给组，如下所示。 
arcs.append("path")
   .attr("d", arc)
   .attr("fill", function(d) { return color(d.data.states); });
这里，fill 用于应用数据颜色。它取自 d3.scaleOrdinal 函数。
步骤 10- 附加文本-使用以下代码在标签中显示文本。 
arc.append("text")
   .attr("transform", function(d) { 
      return "translate(" + label.centroid(d) + ")"; 
   })
.text(function(d) { return d.data.states; });
这里，SVG 文本元素用于在标签中显示文本。我们之前使用 d3.arc() 创建的标签弧返回一个质心点，它是标签的位置。最后，我们使用 d.data.browser 提供数据。
步骤 11- 附加组元素-附加组元素属性并添加类标题以将文本着色并使其成为斜体，这在步骤 1 中指定并定义下面。 
svg.append("g")
   .attr("transform", "translate(" + (width / 2-120) + "," + 20 + ")")
   .append("text")
   .text("Top population states in india")
   .attr("class", "title")
第 12 步- 工作示例-要绘制饼图，我们可以采用印度人口数据集。该数据集显示了一个虚拟网站中的人口，其定义如下。
population.csv 
states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0
让我们为上述数据集创建一个饼图可视化。创建一个网页"piechart.html"并在其中添加以下代码。 
<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
         
         .arc path {
            stroke: #fff;
         }
        
        .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
         
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
         
         var path = d3.arc()
            .outerRadius(radius-10).innerRadius(0);
        
         var label = d3.arc()
            .outerRadius(radius).innerRadius(radius-80);
         
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
            
            arc.append("path")
               .attr("d", path)
               .attr("fill", function(d) { return color(d.data.states); });
        
            console.log(arc)
        
            arc.append("text").attr("transform", function(d) { 
               return "translate("+ label.centroid(d) + ")"; 
            })
            
            .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate("+ (width / 2-120) + "," + 20 + ")")
            .append("text").text("Top population states in india")
            .attr("class", "title")
      </script>
   </body>
</html>
现在刷新浏览器，我们将看到以下响应。
piechart

圆环图

甜甜圈或甜甜圈图只是一个简单的饼图，里面有一个洞。我们可以将孔半径定义为您需要的任何大小，以百分比或像素为单位。我们可以创建圆环图而不是饼图。更改圆弧的内半径以使用大于零的值。其定义如下。 
var arc = d3.arc()
   .outerRadius(radius)
   .innerRadius(100);
与饼图编码相同，内半径略有变化，我们可以生成圆环图。创建一个网页 dounutchart.html 并在其中添加以下更改。

Donutchart.html

<!DOCTYPE html>
<html>
   <head>
      <style>
         .arc text {
            font: 12px arial;
            text-anchor: middle;
         }
        
         .arc path {
            stroke: #fff;
         }
        
         .title {
            fill: green;
            font-weight: italic;
         }
      </style>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <svg width = "400" height = "400"></svg>
      <script>
         var svg = d3.select("svg"),
            width = svg.attr("width"),
            height = svg.attr("height"),
            radius = Math.min(width, height) / 2;
        
         var g = svg.append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        
         var color = d3.scaleOrdinal([
            'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
         ]);
        
         var pie = d3.pie().value(function(d) { 
            return d.percent; 
         });
        
         var path = d3.arc()
            .outerRadius(radius)
            .innerRadius(100);
        
         var label = d3.arc()
            .outerRadius(radius)
            .innerRadius(radius-80);
        
         d3.csv("populations.csv", function(error, data) {
            if (error) {
               throw error;
            }
            
            var arc = g.selectAll(".arc")
               .data(pie(data))
               .enter()
               .append("g")
               .attr("class", "arc");
               arc.append("path")
                  .attr("d", path)
                  .attr("fill", function(d) { return color(d.data.states); });
           
               console.log(arc)
           
               arc.append("text")
                  .attr("transform", function(d) { 
                     return "translate("+ label.centroid(d) + ")"; 
                   })
                  .text(function(d) { return d.data.states; });
         });
         
         svg.append("g")
            .attr("transform", "translate("+ (width / 2-120) + "," + 20 + ")")
            .append("text")
            .attr("class", "title")
      </script>
   </body>
</html>
在这里，我们将路径变量更改为- 
var path = d3.arc()
   .outerRadius(radius)
   .innerRadius(100);
我们设置innerRadius值>0来生成一个圆环图。现在，请求浏览器，我们可以看到以下响应。
找工作要求35岁以下，35岁以上的程序员都干什么去了？
长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。
或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>
<< D3.js 动画 D3.js 图表 >>
写笔记
昵称： 邮箱：
分类导航
Advertisement
Copyright © 2022 立地货 www.lidihuo.com All Rights Reserved. 备案号：京ICP备14037608号-4
Copyright © 2022 立地货 All Rights Reserved.
备案号：京ICP备14037608号-4