- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章D3.js 从P元素的创建开始(显示可加载数据)由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起.
html的基本框架不多说,先上代码再解释:
新建一个test目录,在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 , d3存放d3.v3.js 。
在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>D3: Setting paragraphs' style conditionally, based on data</
title
>
<
script
type
=
"text/javascript"
src
=
"../d3/d3.v3.js"
></
script
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
>
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {
return "I can count up to " + d;
})
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});
</
script
>
</
body
>
</
html
>
|
这个简单demo实现的功能:在body中添加p标签,在p标签中添加d3加载的文本内容,并根据函数设置条件对文字颜色进行调整.
上面的网页代码,body里面的js代码,是展现到页面的数据操作。以后的不少例子,只要修改这一块便可,其他部分可看做页面框架.
这里的内容上篇文章大体都讲到了,使用d3的连缀,将同一对象的一步步数据操作连接起来,便于维护.
d3.select("body") 选择body元素,并连缀到下一方法 。
.selectAll("p") 选中所有段落 。
.data(dataset) 解析加载数组数据,该数组长度是5, 以后连缀的每个方法都将执行五次,按数组下标依次针对数组元素执行方法操作 。
.enter() 创建新的绑定数据的占位元素(相当于创建暂时不知名标签5个).
创建的个数 要根据选择的已有标签数和加载的数据数组长度决定.
如本例,如果body中p标签少于5个,就创建(现在body中p为0个,故创建5个), 。
多于就不创建,最后的占位元素和p元素总个数要为5.
.append("p") 将占位元素改为p元素 。
.text(function(d) {}) 对每个段落的显示内容,写个匿名函数控制,一般返回字符串。在该方法你可以 任意编写, 。
本例让他每段落输出I can count up to 加上相应数组元素值 。
函数格式是固定的,function(d)只有这样,才能将数据加载到函数中.
.style("color","") 设置css的文本颜色属性,同text一样,设置的字符串都可以用function进行你想要的操作。本例中,如果该段落所对应的传入数值大于15,就把该行变红 。
最后,我们看到的效果就是如图:
本文就介绍到这里,下文介绍如何在SVG中绘制圆,以及圆圆相连的简单用力图 。
最后此篇关于D3.js 从P元素的创建开始(显示可加载数据)的文章就讲到这里了,如果你想了解更多关于D3.js 从P元素的创建开始(显示可加载数据)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
初学者 android 问题。好的,我已经成功写入文件。例如。 //获取文件名 String filename = getResources().getString(R.string.filename
我已经将相同的图像保存到/data/data/mypackage/img/中,现在我想显示这个全屏,我曾尝试使用 ACTION_VIEW 来显示 android 标准程序,但它不是从/data/dat
我正在使用Xcode 9,Swift 4。 我正在尝试使用以下代码从URL在ImageView中显示图像: func getImageFromUrl(sourceUrl: String) -> UII
我的 Ubuntu 安装 genymotion 有问题。主要是我无法调试我的数据库,因为通过 eclipse 中的 DBMS 和 shell 中的 adb 我无法查看/data/文件夹的内容。没有显示
我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。 这是我的 html -- {% for x in sets %}
我观察到两种方法的结果不同。为什么是这样?我知道 lm 上发生了什么,但无法弄清楚 tslm 上发生了什么。 > library(forecast) > set.seed(2) > tts lm(t
我不确定为什么会这样!我有一个由 spring data elasticsearch 和 spring data jpa 使用的类,但是当我尝试运行我的应用程序时出现错误。 Error creatin
在 this vega 图表,如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令, jq -r '(map(keys) | add | unique) as
我正在提交一个项目,我必须在其中创建一个带有表的 mysql 数据库。一切都在我这边进行,所以我只想检查如何将我所有的压缩文件发送给使用不同计算机的人。基本上,我如何为另一台计算机创建我的数据库文件,
我有一个应用程序可以将文本文件写入内部存储。我想仔细看看我的电脑。 我运行了 Toast.makeText 来显示路径,它说:/数据/数据/我的包 但是当我转到 Android Studio 的 An
我喜欢使用 Genymotion 模拟器以如此出色的速度加载 Android。它有非常好的速度,但仍然有一些不稳定的性能。 如何从 Eclipse 中的文件资源管理器访问 Genymotion 模拟器
我需要更改 Silverlight 中文本框的格式。数据通过 MVVM 绑定(bind)。 例如,有一个 int 属性,我将 1 添加到 setter 中的值并调用 OnPropertyChanged
我想向 Youtube Data API 提出请求,但我不需要访问任何用户信息。我只想浏览公共(public)视频并根据搜索词显示视频。 我可以在未经授权的情况下这样做吗? 最佳答案 YouTube
我已经设置了一个 Twilio 应用程序,我想向人们发送更新,但我不想回复单个文本。我只是想让他们在有问题时打电话。我一切正常,但我想在发送文本时显示传入文本,以确保我不会错过任何问题。我正在使用 p
我有一个带有表单的网站(目前它是纯 HTML,但我们正在切换到 JQuery)。流程是这样的: 接受用户的输入 --- 5 个整数 通过 REST 调用网络服务 在服务器端运行一些计算...并生成一个
假设我们有一个名为 configuration.js 的文件,当我们查看内部时,我们会看到: 'use strict'; var profile = { "project": "%Projec
这部分是对 Previous Question 的扩展我的: 我现在可以从我的 CI Controller 成功返回 JSON 数据,它返回: {"results":[{"id":"1","Sourc
有什么有效的方法可以删除 ios 中 CBL 的所有文档存储?我对此有疑问,或者,如果有人知道如何从本质上使该应用程序像刚刚安装一样,那也会非常有帮助。我们正在努力确保我们的注销实际上将应用程序设置为
我有一个 Rails 应用程序,它与其他 Rails 应用程序通信以进行数据插入。我使用 jQuery $.post 方法进行数据插入。对于插入,我的其他 Rails 应用程序显示 200 OK。但在
我正在为服务于发布请求的 API 调用运行单元测试。我正在传递请求正文,并且必须将响应作为帐户数据返回。但我只收到断言错误 注意:数据是从 Azure 中获取的 spec.js const accou
我是一名优秀的程序员,十分优秀!