D3数据可视化——简介

最新推荐文章于 2024-05-03 18:08:38 发布

酌希

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量1k

点赞数

分类专栏： D3数据可视化

本文链接：https://blog.csdn.net/yuan13091324/article/details/53098226

版权

D3数据可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做D3相关的开发需要以下几个概念：

1. HTML

超文本标记语言用来构建web浏览器的内容，一个简单的HTML页面像这样

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Page Title</h1>
        <p>This is a really interesting paragraph.</p>
    </body>
</html>

2. DOM

DOM(Document Object Model)是指HTML的层级结构，每一个括号标签是一个“元素”，我们用人际关系中的词来指代元素的相对关系：“父母”、“孩子”、“兄弟”、

“祖先”、“后代”。在上面的HTML代码中，body是h1和p的父元素，其中h1和p互为兄弟。页面所有的元素都是html元素的后代。web浏览器的DOM解析是为了理解

网页的内容。

3. CSS

层叠样式表是用来风格化HTML页面的视觉呈现。一个简单的CSS样式表看起来像这样：

body {
    background-color: white;
    color : black;
}

CSS样式由选择器和规则组成。选择器识别被应用样式的特定元素：

h1          /* Selects level 1 headings              */
p           /* Selects paragraphs                    */
.caption    /* Selects elements with class "caption" */
#subnav     /* Selects element with ID "subnav"      */

规则的属性逐渐积累形成了样式：

color: pink;
background-color: yellow;
margin: 10px;
padding: 25px;

我们用花括号连接选择器和规则：

p {
    font-size: 12px;
    line-height: 14px;
    color: black;
}

D3用CSS样式选择器识别要操作的元素，所以学会使用它很重要。CSS规则可以直接包含在文档的<head>内，像这样：

<head>
    <style type="text/css">
        p {
            font-family: sans-serif;
            color: lime;
        }
    </style>
</head>

或者保存在以“css”为后缀的外部文件中，然后在<head>中引用：

<head>
    <link rel="stylesheet" href="style.css">
</head>

3. JavaScript

JavaScript是一种动态脚本语言,可以在已经加载后指示浏览器页面做修改，脚本可以直接包含在HTML中，在两个script标签之间：

<body>
    <script type="text/javascript">
        alert("Hello, world!");
    </script>
</body>

或者保存在外部文件中，然后在HTML中引用，一般在<head>中：

<head>
    <title>Page Title</title>
    <script type="text/javascript" src="myscript.js"></script>
</head>

4. SVG

D3在呈现可缩放矢量图形的视觉效果表现非常好。SVG是一种基于文本的图象格式，这意味着你可以通过写一些简单的标记代码去指定一个SVG图

的样子，这有点类似于HTML的标签。实际上，SVG代码可以直接包括在任何HTML文档。Web浏览器已经支持SVG格式很多年，Internet Explorer除外。

<svg width="50" height="50">
    <circle cx="25" cy="25" r="22"
     fill="blue" stroke="gray" stroke-width="2"/>
</svg>

在D3中你可能不需要使用SVG，但是你很快就会发现，SVG提供了一些了视觉机会，这是你在普通的HTML元素中不可能遇见的。

酌希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3数据可视化——简介

做D3相关的开发需要以下几个概念：1. HTML 超文本标记语言用来构建web浏览器的内容，一个简单的HTML页面像这样 Page Title Page Title This is a really interesting paragraph. 2. DOM DO
复制链接

扫一扫