D3.JS01

学习笔记,自娱自乐,仅供参考

  1. 利用python搭建简单的服务器
    C:\Users\HP\Desktop\D3>python -m http.server
    H5/JS基础:
    Item/innerHTML/document.getElementsByTagName
    绘制矢量图:
    SVG:append()添加元素;attr()用于给制定属性赋值
    D3:
    如何选择元素?
    选择函数:select selectAll
    Select:返回匹配选择器的第一个元素
    SelectAll:返回匹配选择器的所有元素
    如何查看选择集的状态,以及设定和获取选择集的属性?
    l 选择集(selection):
    D3.select/d3.selectALL返回的的对象称为选择集。
    状态:selection.empty() selection.node() selection.size ()
    属性:selection.attr(name[,value]) name:属性名称 value:属性值 省略返回当前值
    selection.classed(name[,value]) name:类名 value:布尔值 表示是否开启
    selection.style(name[,value]) name:样式名 value:样式值
    selection.property(name[,value]) name:属性名 value:属性值 省略返回属性名
    selection.text([value]) 省略value 省略返回当前文本内容
    selection.html([value]) 获取选择集的内部HTML内容 相当于innerHTML
    如何操作选择集?
    操作:添加 selection.append(name) 选择集的末尾添加一个元素
    插入 selection.insert(name[,before]) 在选择集的指定元素之前插入一个元素
    删除 selection.remove() 删除选择集中的元素
    如何将数据绑定到选择集?
    l 数据绑定:
    selection.datum([value]) 选择集中的每一个元素都绑定相同的数据value
    selection.data([values[,key]] 选择集中的每一个元素分别绑定数组values的每一项。Key是一个键函数,用于指定绑定数据组时对应规则。
    Datum()工作过程
    Data()工作过程:将数组各项分别绑定到选择集的各个元素上,并且能制定绑定规则。当数组长度与元素数量不一致时,data()也能处理。
    选择集和数据绑定后如何处理?
    l 选择集的处理

D3.js入门

  1. 什么是D3?D3是指数据驱动文档(Data-Driven Documents),根据D3的 官方定义: D3.js 是一个 JavaScript 库,它可以通过数据来操作文档。D3 可以通过使 用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因 而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同 时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作 DOM。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 3,450评论 1 4
  • [译]D3.js 之 d3-selection 原理 译者注 原文: 来自 D3.js 作者 Mike Bosto...
    ssthouse阅读 729评论 0 0
  • 对集合的操作 关于d3.attr 一个可以处理很多情况的函数,当只传入一个参数时,如果是string,则返回该属性...
    陈坚生阅读 2,533评论 0 2
  • 看完该API后,至少会画出一个简单的图形 D3.js 入门 1. d3-selection: 【 选择作图区域...
    Pretty_Boy阅读 985评论 0 1
  • Data Visualization with D3 D3: SVG中的jQurey 1. Add Documen...
    王策北阅读 769评论 0 2