D3.JS（数据驱动文档）

简介： D3是Data Driven Documents的缩写，D3.js是一个基于数据管理文档的资源JavaScript库。 D3 是最有效的数据可视化框架之一。它允许开发人员在 HTML、CSS 和 SVG 的帮助下在浏览器中创建动态的交互式数据可视化。数据可视化是将过滤后的数据以图片和图形的形式表现出来。图形或图形表示，即使是复杂的数据集也能轻松呈现。此外，可以借助数据可视化轻松跟踪比较分析或模式，从而使客户能够在没有太多头脑风暴的情况下做出决策。使用 D3.js 等框架可以轻松开发此类可视化。 Mike Bostock编写了 D3 框架。在 D3 之前，Protovis 工具包被广泛用于数据可视化。尽管还有许多其他的数据可视化框架，但 D3.js 因其灵活性和可学习性而留下了自己的足迹。
D3 不是作为一个提供所有可以想象的功能的单一框架工作，而是通过提供有效的数据操作来解决问题的核心。它减少了开销并提供了灵活性。

特点：还有许多其他平台或框架可用于管理数据可视化，但 D3 由于极其灵活而将所有其他框架抛在了后面。以下是将 D3 与其他框架区分开来的主要功能：

• 由于 D3 使用 HTML、CSS、SVG 等 Web 标准。它呈现强大的可视化图形。
• 数据驱动方法允许 D3 从不同的 Web 节点或服务器检索数据并进一步分析它以呈现可视化。此外，它还可以使用静态数据进行处理。
• D3 允许使用各种工具来创建图形。它是一个基本的结构化表格或经过充分分析的饼图。它的库从最基本的工具到高级资源集不等。甚至可以使用 D3 完成复杂的 GIS 映射。即使它允许根据需要自定义可视化。尽管如此，由于它对 Web 标准的支持，这一切都是可能的。
• 它甚至支持大型数据集并充分利用其预定义库，从而使用户能够重用代码。
• 支持过渡和动画，D3 隐式管理逻辑。因此，不需要明确地管理或创建它们。动画渲染是响应式的，支持内部状态之间的快速传输。
• D3 的关键特性之一是它支持 DOM 操作并且足够灵活以动态管理其处理程序的属性。

句法：
D3 使用 JavaScript 函数来执行大部分选择、转换和数据绑定任务。 CSS 在组件样式方面也起着关键作用。此外，JavaScript 函数可以以这样的方式编写脚本，以便它们可以读取以其他格式存在的数据。

• 选择：在处理数据集之前，要执行的主要任务是选择，即从数据集中检索数据。 D3 通过将预定标签作为参数传递给选择函数来启用选择任务。

  d3.selectAll("pre")   // It select all elements defined under the 
   tag
    .style("color", "cyan"); // set style "color" to value "cyan" color
  

  同样，可以处理在特定标签下定义的各种数据集。 selectAll() 的参数可以是标签、类、标识符或属性。元素可以修改、添加、删除或操作，所有这些都完全基于数据。

• 转换：转换可以使数据集的值和属性动态化。

  d3.selectAll("pre")     // select all 
   elements
     .transition("transitionEx") // Declaring transition named as "transitionEx"
       .delay(10)          // transition starting after 10ms
       .duration(50);      // transitioning during 50ms
  

  在上述场景中，请注意，对于所有作为 pre 标签子集的元素，都会相应地进行转换。

对于更高级的用法，D3 使用加载的数据来创建对象和操作，相应地完成属性添加和转换。所有这些操作都属于数据绑定部分。

设置 D3.js 环境：为了将 D3 用于网站或网页，首先需要注意的是它的安装或将库导入网页。

1. D3 是一个开源库。源代码可在 D3.js 网站上免费获得。下载最新版本的库。（目前为 5.7.0）
   从源链接下载 D3 库[/caption]
2. 解压下载完成后得到的.zip文件。找到 d3.min.js 文件，它是 D3 源代码的最小版本。复制该文件并将其包含在根文件夹或网页的主库目录中。在网页中，包括 d3.min.js 文件，如图所示。

       
             
           
           
       
         
       
           
             
               // write your own d3 code here 
           
       

   注意： D3 不支持 Internet Explorer 8 或其更低版本。最好使用 Safari/Mozilla Firefox 或 Chrome。

3. 示例：下面显示的基本示例演示了使用 D3 创建 SVG 对象，即 HTML 文档中的场景中的圆圈。

      
   
       
             
       // Declaring the script type 
       
             
           // Creating a variable to store SVG attributes
           var myGraphic = d3.select("#circle")
             
           // applying the svg type attribute 
           .append("svg")  
             
           // initializing the width of the object pane
           .attr("width", 500)  
             
           // initializing the height of the object pane
           .attr("height", 500);     
      
       myGraphic.append("circle")
         
           // Outline color attribute set to blue
           .style("stroke", "blue") 
             
           // Fill color attribute set to red
           .style("fill", "red")  
             
           // Radius attribute set to 100
           .attr("r", 100)
             
           // X-coordinate set to 300px
           .attr("cx", 300) 
             
           // Y-coordinate set to 100px
           .attr("cy", 100)         
      
            // applying action when the mouse pointer hovers over the circle
           .on("mouseover", function(){d3.select(this).style("fill", "lavender");})
           .on("mouseout", function(){d3.select(this).style("fill", "red");});
          
       

   输出：
   在鼠标移动之前：
   
   鼠标移动后：
   

   此外，使用 D3 框架可以更轻松地添加和操作动画、过渡、属性。动作处理的所有工作都可以使用辅助函数来完成。在上面的示例中，select()函数执行检索参数的任务，而 append() 将属性作为子项添加到所选参数。 D3 专注于抽象，因此大多数内部动作或执行对最终用户隐藏，从而使其更易于使用。在上述情况下，绑定事件的任务是在 .on()函数的帮助下完成的，该函数将鼠标事件作为参数传递。值得注意的是，D3 框架中使用了匿名函数概念。这里，匿名函数作为参数传递。
   使用 D3 框架可以完成更复杂的操作，例如从不同格式的数据集（如 .csv 或 JSON 文件）中检索数据。

   好处：

   • D3 支持所有程序员都知道的 HTML、CSS、SVG 等 Web 标准，因此任何人都可以轻松使用它。简而言之，D3 公开了 HTML5、CSS3 和 SVG 等 Web 标准的功能。
   • 它非常轻巧且灵活，代码可重用，因此更可取。
   • 与其他可用的 API 或框架相比，它为用户提供了更广泛的控制来管理可视化和数据。
   • 作为一个开源框架，可以根据自己的需要轻松操作 D3 的源代码。

   缺点：

   • D3 与旧版本的浏览器不兼容。如果有人希望以向后兼容性可视化数据，则可视化可能必然是静态的，因为兼容性差。
   • 安全性对 D3 来说仍然是一个挑战。使用 D3 无法轻松隐藏或保护数据。

   应用：在各种数据可视化领域具有优势。使用 D3 的一些主要领域如下：

   • 基本图表和图形分析可视化。
   • 网络可视化。
   • 数据仪表板开发模块。
   • Web 地图创建和合成。
   • 交互式数据表示。

     相关文章： HTML | SVG-基础