three.js 气泡_使用D3.js的简单气泡图

dingshi7798

于 2014-04-03 00:00:00 发布

阅读量908

点赞数

文章标签：可视化数据可视化机器学习数据分析 python

原文链接：https://www.sitepoint.com/simple-bubble-charts-using-d3-js/

版权

本文介绍如何使用D3.js库创建气泡图，涵盖了创建X和Y轴，绘制气泡以及动态设置数据域的过程。通过实例展示了如何在JavaScript中实现数据可视化的简单步骤。

摘要由CSDN通过智能技术生成

three.js 气泡

在我的工作场所，我被分配了可视化一些数据的任务。那时我碰到了D3.js ，这是一个JavaScript库，用于以交互方式基于数据处理文档。它使用HTML5，JavaScript，SVG和CSS3。在本教程中，我们将使用D3以气泡图的形式可视化我们的数据。

在开始之前，请下载D3源。

创建X和Y轴

让我们开始使用D3绘制一些轴。首先，我们在HTML页面中需要SVG。 SVG是基于XML的矢量图像格式，为交互和动画提供支持。以下代码示例显示了HTML页面的外观。请注意对D3的引用和主体中的svg标签。

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="d3.v3.js"></script>
    <script>
      $(function() {
        InitChart();
      });

      function InitChart() {
        // Chart creation code goes here
      }
    </script>
  </head>
  <body>
    <svg id="svgVisualize" width="500" height="500"></svg>
  </body>
</html>

D3.js有一组API ，我们将使用它们来绘制轴。我们将使用的API之一是d3.scale.linear() ，用于创建定量标度。使用此API，我们可以定义每个轴的范围和域。域定义了图表上显示的最小值和最大值，而范围是我们将覆盖的SVG的数量。我们的svg是500×500，所以我们将范围定义为40×400。

最低0.47元/天解锁文章

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 气泡_使用D3.js的简单气泡图

three.js 气泡在我的工作场所，我被分配了可视化一些数据的任务。那时我碰到了D3.js ，这是一个JavaScript库，用于以交互方式基于数据处理文档。它使用HTML5，JavaScript，SVG和CSS3。在本教程中，我们将使用D3以气泡图的形式可视化我们的数据。在开始之前，请下载D3源。创建X和Y轴让我们开始使用D3绘制一些轴。首先，我们在HTML页面中需...
复制链接

扫一扫