开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在d3中隐藏加载图表后的加载图像？

在d3中隐藏加载图表后的加载图像，可以通过以下步骤实现：

首先，确保你已经在HTML页面中引入了d3库，并创建了一个包含加载图表的容器元素。
在加载图表之前，可以在容器元素中添加一个加载图像，用于显示加载过程。可以使用HTML的<img>标签或CSS的background-image属性来实现。
在加载图表的代码之前，使用CSS将加载图像隐藏起来。可以使用display: none;或visibility: hidden;来隐藏加载图像。
在加载图表的代码中，使用d3的加载函数（如d3.csv()或d3.json()）来获取数据并生成图表。确保在加载完成后，通过回调函数或Promise的then()方法来执行后续的图表生成代码。
在加载完成后，可以使用CSS将加载图像重新显示出来。可以通过移除之前添加的display: none;或visibility: hidden;的样式来显示加载图像。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>隐藏加载图像示例</title>
  <style>
    .loading-image {
      display: none; /* 初始隐藏加载图像 */
    }
  </style>
</head>
<body>
  <div id="chart-container"></div>
  <img class="loading-image" src="loading.gif" alt="加载中"> <!-- 加载图像 -->
  
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script>
    // 获取容器元素和加载图像元素
    const container = d3.select("#chart-container");
    const loadingImage = d3.select(".loading-image");

    // 显示加载图像
    loadingImage.style("display", "block");

    // 使用d3加载数据并生成图表
    d3.csv("data.csv").then(data => {
      // 生成图表的代码
      // ...

      // 隐藏加载图像
      loadingImage.style("display", "none");
    });
  </script>
</body>
</html>

在这个示例中，我们使用了一个CSS类名为.loading-image的选择器来选择加载图像元素，并通过d3.select()方法获取该元素的引用。在加载图表之前，我们将加载图像的样式设置为display: none;，使其初始状态下隐藏起来。在加载完成后，通过将样式设置为display: block;来显示加载图像，然后再生成图表。最后，通过将样式重新设置为display: none;来隐藏加载图像。

请注意，这只是一个示例，实际使用时，你需要根据自己的具体情况进行调整和扩展。

相关搜索:Glide listener无法在加载图像后隐藏进度条 ListView中的图像延迟加载加载后,在secquence中淡入多个图像加载页面后，在dropzone中显示保存的图像在加载ajax的内容中预加载图像在视图控制器加载后加载集合视图的图像视图如何在amCharts中导出图表为图像时显示加载器？如何在Elm中检测加载图像失败如何在javascript中加载图像之前隐藏播放按钮如何在Reactjs中重新加载画布图像

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

这款免费插件，让Excel轻松制作酷炫图表

最近我看一篇介绍如何用Excel来制作径向树图[1]的文章，在其中学到了一个很有趣的Excel 加载项。

03

受欢迎的五个开源可视化工具——你的选择是？

人工智能时代，数据和算法以及硬件资源是非常重要的，相关行业的大公司也越来越关注数据中蕴含的价值，数据的收集和应用比以前任何时候都看得更加重要，甚至业务相近的公司不惜打价格战或亏本以获得用户活跃量，这些都看中的是数据中蕴含的价值，需要等待数据科学家去进一步挖掘，拂去表面的迷雾，深度发现隐藏在大数据中所含的商业秘密或科学研究。数据科学家职业也成为热门岗位，很多IT从业人员纷纷转行进入这个新兴领域之中。美中不足之处在于，随着我们不断挖掘数据，进而发现有用信息时，呈现出现的过程和实施结果的难度就越来越大。值得庆幸的是，大量的开源数据可视化工具能够从空间和表格中获取到独特数据，并通过使用高级图形和图表向用户呈现信息。那么哪些工具值得花时间去探索或采用呢？本文汇集了5个开源数据可视化工具，这些工具采用了说明性方法来处理复杂的数据。

02

流量结构分布图——桑基图（Sankey）

桑基图作为相对复杂的图表种类，平时很少用到，不仅仅是因为它的引用场景相对狭窄，另一方面则是制作难度相对较大，门槛较高。不过针对第一个问题，如果你能很好地理解自己所涉及到的业务数据结构及想要表达和呈现的维度信息，那么关键时刻使用桑基图确实会让你的报告锦上添花。桑基图用于表达流量分布于结构对比，最初的发明者使用它来呈现能量的流动与分布。百度百科给了桑基图相对完善的解释：桑基图（Sankey diagram），即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量

05

九大数据可视化利器，你有在使用吗？

可视化信息以易于阅读的视觉化内容正在被越来越多的人所青睐。可视化形式呈现信息的需求也随之增加，因此近年来涌现出了许多数据可视化工具。对于不熟悉数据可视化领域的人来说，最好的方法是尝试一些现成的解决方案来快速制作标准化的图表。对于拥有更多技术专长、经验丰富的用户，最好的办法是使用更灵活的库。下面与大家分享九大数据可视化库，希望你可以找到最适合的一款。

06

【视频】CNN（卷积神经网络）模型以及R语言实现回归数据分析

无人驾驶汽车最早可以追溯到1989年。神经网络已经存在很长时间了，那么近年来引发人工智能和深度学习热潮的原因是什么呢？[1秒]答案部分在于摩尔定律以及硬件和计算能力的显著提高。我们现在可以事半功倍。顾名思义，神经网络的概念是受我们自己大脑神经元网络的启发。神经元是非常长的细胞，每个细胞都有称为树突的突起，分别从周围的神经元接收和传播电化学信号。结果，我们的脑细胞形成了灵活强大的通信网络，这种类似于装配线的分配过程支持复杂的认知能力，例如音乐播放和绘画。

01

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

「沙里淘金」精选浏览器端JavaScript库资源推荐

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

目前最全，可视化数据工具大集合

数据可视化技术的基本思想是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析。图表库 C3 – 以 d3 为基础构建的可重用图表库 Chart.js – 带有 canvas 标签的图表 Chartist.js – 具有强大浏览器兼容能力的响应式图表 Dimple – 适用于业务分析的面向对象的 API Dygraphs – 适用于大型数据集的交互式线性图表库 Echarts – 针对

07

这种 “交互可视化” 效果不要太赞了（配有动态展示）

本文介绍了如何在Jupyter Notebook中创建交互内容。所谓内容，主要指可视化内容。不过我们很快就会看到，这里的可视化内容不仅包括通常的图表，还包括有助于探索数据的交互界面和动画。

03

利用R语言制作出漂亮的交互数据可视化

利用R语言也可以制作出漂亮的交互数据可视化，下面和大家分享一些常用的交互可视化的R包。

01

【学习】教你用R的Inkscape制作数据图表

从我使用R开始，就一直用R来制作图表，只有一个理由：R在过滤和数据可视化方面是一个相当了不起的工具。特别是如果我们使用优秀的ggplot2库，我们可以将原始数据在几分钟内拥有一个引人注目的可视化效果。但是，如果我们想给我们的视觉效果一个额外的震撼呢？如果我们想要做一些手工的修饰呢？我曾长期抵制这些，因为我认为数据传递的主要目的是让观众用自己合适的方式去解析。但随着可视化变得越来越重要，我认为仅仅只是数据传递是不够的，现在，一个可视化的视觉吸引力是必不可少的。意识到这一点，我开始研究如何使信息图表可视化。甚

07

Python奇淫技巧，5个数据可视化工具

数据可视化的工具和程序库已经极大丰盛，当你习惯其中一种或数种时，你会干得很出色，但是如果你因此而沾沾自喜，就会错失从青铜到王者的新工具和程序库。如果你仍然坚持使用Matplotlib（这太神奇了），Seaborn（这也很神奇），Pandas（基本，简单的可视化）和Bokeh，那么你真的需要停下来了解一下新事物了。例如，python中有许多令人惊叹的可视化库，而且通用化程度已经很高，例如下面这五个：

03

Python奇淫技巧，5个数据可视化工具

数据可视化的工具和程序库已经极大丰盛，当你习惯其中一种或数种时，你会干得很出色，但是如果你因此而沾沾自喜，就会错失从青铜到王者的新工具和程序库。如果你仍然坚持使用Matplotlib（这太神奇了），Seaborn（这也很神奇），Pandas（基本，简单的可视化）和Bokeh，那么你真的需要停下来了解一下新事物了。例如，python中有许多令人惊叹的可视化库，而且通用化程度已经很高，例如下面这五个：

03

60种常用可视化图表的使用场景——（下）

这种图表使用同心圆网格来绘制条形图。每个圆圈表示一个数值刻度，而径向分隔线则用作区分不同类别或间隔（如果是直方图）。

01

Python奇淫技巧，5个炫酷的数据可视化工具

数据可视化的工具和程序库已经极大丰盛，当你习惯其中一种或数种时，你会干得很出色，但是如果你因此而沾沾自喜，就会错失从青铜到王者的新工具和程序库。如果你仍然坚持使用Matplotlib（这太神奇了），Seaborn（这也很神奇），Pandas（基本，简单的可视化）和Bokeh，那么你真的需要停下来了解一下新事物了。例如，python中有许多令人惊叹的可视化库，而且通用化程度已经很高，例如下面这五个：

07

Python奇淫技巧，5个数据可视化工具

数据可视化的工具和程序库已经极大丰盛，当你习惯其中一种或数种时，你会干得很出色，但是如果你因此而沾沾自喜，就会错失从青铜到王者的新工具和程序库。如果你仍然坚持使用Matplotlib（这太神奇了），Seaborn（这也很神奇），Pandas（基本，简单的可视化）和Bokeh，那么你真的需要停下来了解一下新事物了。例如，python中有许多令人惊叹的可视化库，而且通用化程度已经很高，例如下面这五个：

02

JavaScript资源大全中文版（Awesome最新版）

本文主要介绍了高可维护的JavaScript代码规范，包括变量命名、注释、函数、正则表达式、对象、闭包、性能、模块化、私有变量、代码格式化、测试、编码规范、工具和最佳实践等。同时，本文还提供了常见代码规范的具体示例和JavaScript代码规范检查工具的输出结果。通过遵循这些规范，可以大大提高代码的可读性和可维护性，从而提高开发效率。

Python5个数据可视化工具

如果您了解并使用上面提到的库，那么您就处于进化的正确轨道上。它们可以帮助生成一些令人拍案的可视化效果，语法也不难。一般来说，我更喜欢Plotly+Cufflinks和 D3.js. 以下详细道来：

02

利用Python绘图和可视化（长文慎入）

Python有许多可视化工具，但是我主要讲解matplotlib（http://matplotlib.sourceforge.net）。此外，还可以利用诸如d3.js（http://d3js.org/）之类的工具为Web应用构建交互式图像。 matplotlib是一个用于创建出版质量图表的桌面绘图包（主要是2D方面）。该项目是由John Hunter于2002年启动的，其目的是为Python构建一个MATLAB式的绘图接口。如果结合使用一种GUI工具包（如IPython），matplotlib还具有诸如缩放

07

2019年最好的JavaScript图表库

随着数据收集和使用持续呈指数级增长，对这些数据进行可视化的需求变得越来越重要。开发人员寻求将数百万个数据库记录整合到美丽的图表和仪表板中，人类可以快速直观地解释这些记录。

02

手绘效果为图表添色，cutecharts带你画Q版可视图|可视化系列04

Matplotlib默认主题下绘制的可视化图形如一位高贵冷艳、不沾烟火的冰山女神，而cutecharts的图就像不拘常规、潇洒无羁的活力少年。

01

利用mpld3增强Python中Matplotlib图表的交互性

Matplotlib 是 Python 中最常用的绘图库之一，它提供了丰富的绘图功能，但默认情况下生成的图表是静态的。然而，通过结合使用 Matplotlib 和 mpld3 库，我们可以轻松地创建交互式图表，使得数据可视化更加生动和易于理解。

01

awesome-javascript-cn

JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。包管理器管理着 JavaScript 库，并提供读取和打包它们的工具。 npm：npm 是 JavaScript 的包管理器。官网 Bower：一个 web 应用的包管理器。官网 component：能构建更好 web 应用的客户端包管理器。官网 spm：全新的静态包管理器。官网 jam：一个专注于浏览器端和兼容 RequireJS 的包管理器。官网 jspm：流畅的浏览器包管理

08

Excel画出来的图表不高级？你只是没遇到这款小插件

本文经授权转自：澎湃美数课今天，就为大家奉上制作径向柱状图的N种方法，任君挑选。在这当中，还有专门为大家炮制的超实用小功能哦可以看到实现的方法很多，他们之间各有千秋。有需要动脑筋去写代码的D3.js、Processing，也有基于软件来做的，更有直接在Excel里面生成的傻瓜式操作。接下来会为大家稍微讲解编程和工具的操作思路，然后重点为大家介绍如何用Excel做出径向柱状图的效果。 ✦✧✧ 方法1 敲敲敲代码：D3、Processing 烟花、癌症等图，是我们之前做过的一些径向柱状图。他们主要是通

04

excel也那绘制词云图哦！还有很多的可视化图表可挑选！

excel是老牌的数据可视化软件了，很多方面都已经很完美了，很多的图表都可以轻松绘制出来，但如果想要做的好看，就需要一些技巧了。

04

21款酷炫的数据可视化工具，拿走不谢！

文 | Piotr Kuzniewicz 译 | 高雨滴校 | 郭瑽辛辛苦苦分析一堆大数据，竟然没人看！如果你正着手于从数据中洞察出有用信息，那你所需要的正是——数据可视化。俗话说，有图有真相，

【知识】详细介绍 CUDA Samples 示例工程

CUDA 是“Compute Unified Device Architecture (计算统一设备架构)”的首字母缩写。CUDA 是一种用于并行计算的 NVIDIA 架构。使用图形处理器也可以提高 PC 的计算能力。

01

【原创】说好的暴雨呢，搁哪呢？还能不能雨～露～均～沾？

不是说下大雨吗？玩儿呐？搁哪呢？大雨搁哪呢？下丢啦？哗啦到海里去啦？让五娃给吞啦？南方整的那老大，看不起副中心咋的？还能不能雨～露～均～沾～？你说我小船儿都买好了，搁哪划，搁哪划！！给我一个完美的解释！北京气象局通知：原约定于昨天和今早来的暴雨，因办进京证，耽误了点儿时间，或许今天夜间赶到。这场雨如果下大了肯定不小，如果下小了也肯定不会大，请市民再耐心等待！具体情况等下完后气象台会报给市民。气象台温馨提醒：今天如果不下雨，明天不下雨的话，这两天就没有雨了，就看后天的了。气象台郑重劝告

06

60 种常用可视化图表，该怎么用？

数据可视化的爱好者Severino Ribecca，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

01

常用60类图表使用场景、制作工具推荐！

数据可视化的爱好者Severino Ribecca，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

02

可视化图表样式使用大全

Severino Ribecca 是一位平面设计师，也是数据可视化的爱好者，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

01

10种免费的工具让你快速的、高效的使用数据可视化

是的，我们有数据，并有了数据的洞察，然后呢？显然，下一步将是与人们交流这些发现，以便他们采取必要的行动。最有效的数据交流方式之一就是讲故事。但是要成为有效的讲述者，我们需要简化事情，而不是使事情复杂化，这样使得分析的真正本质不会丢失。

02

个推数据可视化之人群热力图、消息下发图前端开发实践

随着互联网在各行各业的影响不断深入，数据规模越来越大，各企业也越来越重视数据的价值。作为一家专业的数据智能公司，个推从消息推送服务起家，经过多年的持续耕耘，积累沉淀了海量数据，在数据可视化领域也开展了深入的探索和实践。

03

【数据可视化】数据可视化入门前的了解

在大数据时代，离不开数据的处理和分析，这次来介绍一下数据可视化，在之后的文章中使用的工具都是Apache ECharts，它是一个基于 JavaScript 的开源可视化图表库。

01

算法金 | D3blocks，一个超酷的 Python 库

库简介：D3Blocks是一个基于d3 javascript (d3js)的图形库，通过只需少量的Python代码就能创建出视觉上吸引人且实用的图表！

00

React 项目中使用 highstocks

highstocks 是一个功能强大且丰富的股票资讯类图表的库，其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的项目，所以需要用到这个图表库，由此篇文章开张记录下使用该库的各种问题和小技巧。方便以后他人遇到问题及时解决。首先我们就来谈一谈如何在 react 项目中使用它。

01

React 项目中使用 highstocks

highstocks 是一个功能强大且丰富的股票资讯类图表的库，其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的项目，所以需要用到这个图表库，由此篇文章开张记录下使用该库的各种问题和小技巧。方便以后他人遇到问题及时解决。首先我们就来谈一谈如何在 react 项目中使用它。

02

使用JavaScript和D3.js实现数据可视化

D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。

03

cacaview - Linux终端下将图片转换ASCII Art代码图案

有时你可能需要终端输出许多图片，那么现在就让我们在Linux终端打开一个新窗口显示图片。

00

五个创建交互式图表的Python库

作者｜Melissa Bierly 选文｜Aileen 翻译｜冯琛校对｜Elaine琏数据可视化专家Andy Kirk说过，数据可视化分为两类：探索性可视化图表和解释性可视化图表。解释性可视化图表的目标是进行描述——它们是根据对事物表面的关键线索而被仔细构造出来的。另一方面，探索性可视化图表建立了与数据库或主题事件的互动，它们帮助用户探索数据，让他们发掘自己的观点：发现他们自己认为相关的或者感兴趣的事物。通常，探索性可视化图表是交互式的。尽管现在有许多Python绘图库，但只有少数可以创建能够使你

06

使用CDSW/CML构建交互式机器学习应用程序

除了发现隐藏在大量数据中的有洞察力的趋势和模式之外，还有什么比这更有趣？能够轻松地与同事和其他业务团队共享并向他们解释！新的Cloudera 的机器学习（ CML ） 1.2 ，我们非常高兴地宣布托管持久的基于Web的应用程序和使用Flash、仪表板和Shiny到共享分析结果及洞察力与企业利益相关者框架仪表盘的支持。跟随本文中的演示，立即开始使用CML的新分析应用程序功能获得更多乐趣。（注意：CDSW 1.7中也提供此功能）。

02

盘点10款超好用的数据可视化工具

现代社会早已进入读图时代，图像在一定上程度上取代了文字，占据了主导地位。对于数据分析来说，一张清晰的可视化图表确实比纷繁复杂的数字更清晰美观。随着科技的发展以及可视化需求的急剧增大，涌现了大批的数据可视化工具，通过对比分析市面上众多的数据可视化工具之后，我们挑选了几款给大家进行参考。

01

前端框架与库-D3.js数据可视化基础

在现代Web开发中，数据可视化已成为展示复杂数据集的关键技术之一。D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建动态、交互式的可视化图表。无论是简单的条形图还是复杂的地理热力图，D3.js都能提供灵活且深度的控制。本文旨在为初学者介绍D3.js的基础知识，探讨一些常见的问题及易错点，并提供解决方案和代码示例。

01

JavaScript图表的数据可视化:比较D3和Kendo UI

D3和Kendo UI只是在web应用程序中创建图表的两种方式，选项范围从简单地在屏幕上绘制图形到使用复杂的图表组件。D3和Kendo UI都很受欢迎，两者都能完成工作。然而，相似之处到此为止，这两种方法代表了非常不同的方法，具有非常不同的特性。

03

前端框架与库-D3.js数据可视化基础

在现代Web开发中，数据可视化已成为展示复杂数据集的关键技术之一。D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建动态、交互式的可视化图表。无论是简单的条形图还是复杂的地理热力图，D3.js都能提供灵活且深度的控制。本文旨在为初学者介绍D3.js的基础知识，探讨一些常见的问题及易错点，并提供解决方案和代码示例。

01

说好不哭！数据可视化深度干货，前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入，数据规模越来越大，各企业也越来越重视数据的价值。作为一家专业的数据智能公司，个推从消息推送服务起家，经过多年的持续耕耘，积累沉淀了海量数据，在数据可视化领域也开展了深入的探索和实践。

00

从零开始深度学习（十五）：正则化

深度学习可能存在着数据过拟合问题，即存在高方差。常见的解决方法有两个：一个是正则化；另一个是更多数据，更多数据是一个非常可靠的方法，但是可能无法时时刻刻准备足够多的训练数据，或者获取更多训练数据的成本很高，正则化则没有这些问题，它通常有助于避免过拟合或减少网络误差。

01

【干货】21个数据可视化利器

大数据文摘作品，欢迎个人转发朋友圈；其他机构、自媒体转载，务必后台留言，申请授权。荐文专家招募：如果你是业界专家，如果你的工作和数据有关，更重要的是，如果你能够找到好文章并愿意与读者分享，请点击文末“阅读原文”，加入我们！荐文一旦采纳，我们会在文章开头致谢并宣传。荐文专家康欣：博士，多年从事图像及数据处理和分析、计算机视觉、模式识别、机器学习、增强现实等领域的技术研究和创新应用，现为西门子中国研究院高级研究员。希望借此平台，与大数据分析爱好者以及专家学者交流、合作。编译|陆兴海校对|W

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭