d3:数据到元素之间的映射

在D3中,数据可视化的实质就是把数据映射到图形,那么,如何实现映射呢?D3的全称是Data Drive Document,即数据驱动文档,这意味着我们需要将数据值绑定到DOM元素上,绑定的意思意味着我们需要把数据附加或者绑定到DOM元素上,以便将来引用数据的值或者映射规则。

在数据与元素之间实现关联,即我们需要有相应的数据对象和DOM元素,然后通过D3的方法来实现关联,下面就来说说方法,返回值。

  • d3:引用d3对象,从而能够调用其方法
  • select("body"):选择一个css选择器,然后该方法将会返回DOM中匹配第一个元素的引用
  • append("p"):创建一个新的元素,然后它会被追加到调用它的元素的末尾
  • text("paragraph"):创建一段文本,它会被添加到当前元素的内容之间

即:d3.select("body")

.append("p")

.text("paragraph");

通过这种连缀语法,我们就能够在body元素之间插入一个p标签,并且添加文本值paragraph。

时间: 2024-12-11 00:28:32

d3:数据到元素之间的映射的相关文章

一步一步学EF系列【2、Fluent API的方式来处理实体与数据表之间的映射关系。】

EF里面的默认配置有两个方法,一个是用Data Annotations(在命名空间System.ComponentModel.DataAnnotations;),直接作用于类的属性上面,还有一个就是Fluent API,通过新增相应的配置类来覆盖默认配置另外.我们主要学习Fluent API,Data Annotations可以自行去学习一下. 补充一下为什么要用Fluent API 使用DataAnnotation非常简单,但对于EntityFramework中的特性,就要在实体类中引入Ent

D3数据连接之“更新”和“退出”

摘要: 昨天的推送中,我们阐述了数据连接的进入阶段.本文中,我们学习一下其更新和退出机制. 本文选自<图说D3:数据可视化利器从入门到进阶>. 让我们回到之前那个"怪咖"Frank那里,重新审视一下他的那些小报封面数据,看一下Frank手头前3个月的数据,以及我们之前做过的事情. 到目前为止,我们只让1月的数据"进入"页面,并渲染出一系列文本元素. 让文本进入页面. 页面上有文本元素,每个都表示janData中的一个数据点.现在我们要更新页面,显示2月的

Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组,可以去掉任意一个元素,问剩余数列的困难值的最小值是多少】

A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output Mike is trying rock climbing but he is awful at it. There are n holds on the wall, i-th hold is at height ai off the g

6.9服务与主机之间的映射

很早之前,就有关于“每台机器(machine)应该有多少个服务”的讨论.在我们继续之 前,应该找一个比“机器”更好的术语.在前虚拟化时代,单个运行操作系统的主机与底 层物理基础设施之间的映射形式有很多种.因此,我倾向于使用“主机”(host)这个词来 做通用的隔离单元,也就是能够运行服务的一个操作系统.如果你直接在物理机上部署, 那么一台物理机映射到一台主机(在当前上下文中,这个词可能不完全正确,但确实也找 不到更好的了).如果你使用了虚拟化,单个物理机会映射到多个独立的主机,并且每个 都可以包

2016.02.20 学习笔记 数据在Activity之间的传递的情况

情况一:一个Activity跳转到另一个Activity时,将第一个Activity的数据传递到第二个Activity里面. 分析:当一个界面跳转到另一个界面的同时还要讲数据传递过去,这种情况需要用Intent类putExtra()方法实现. 具体在Onclick方法中的样例代码如下: Intent i1=new Intent(this,SecondActivity.class); String Message=Edit1.getText().toString(); i1.putExtra("M

去除行内(inline/inline-block)元素之间的间距

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl

清除行内元素之间HTML空白的几种解决方案

行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示在屏幕上那是相当的讨厌. 当然,有一些技巧(方法)可以用来清除他们:比如粗暴地完全删除空白,或者其他的方法: 解决方案1: font-size:0; 最好的方法是在外层元素上设置font-size:0;同时在内层元素上指定字体具体的大小. 复制代码 代码如下: ul.inline-block-lis

ABP文档 - 对象与对象之间的映射

文档目录 本节内容: 简介 IObjectMapper 接口 集成 AutoMapper 安装 创建映射 自动映射的特性 自定义映射 扩展方法 MapTo 单元测试 预定义的映射 LocalizableString -> string 注入 IMapper 简介 把一个对象映射到另一个相似的对象很常见,两个对象(类)具有相似或相同的属性,它们之间要互相映射,其实这项工作重复且无聊,考虑一个典型的应用服务方法,如下: public class UserAppService : Applicatio

SpringMVC使用注解完成 URL 和 Controller &amp; 方法之间的映射细节

1. 使用 @RequestMapping 来进行 URL 和 类 及 方法之间的映射. 2. @RequestMapping 注解可以标识到类上面,也可以标识到方法上 1). 若类上面没有标识,则方法上面的直接相对于 WEB 应用的根目录 < a href ="helloworld?name=springMVC">Hello SpringMVC </a> 2). 若类上面有 @RequestMapping 标识,则类上面的 @RequestMapping 的