select方法(css选择器)

.select("text")  # 选择最后一个text标签
.select("text.title") # 选择class为title的标签
.select("text.name") # 选择class为name的标签
.select("p[class=name]") # 使用select选择器

<html> <body> <p>hello world</p><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>  d3.select("body").selectAll("p").text("world hello");  //这里selectAll也可以传入样式选择器比如"#myid"    </script> </body>
</html>

选择集selection

1.查看状态
selection.empty()|空返回true
selection.node()|返回第一个非空元素,如果选择集为空,返回false
selection.size()|选择集中元素的个数

2.设置属性
selection.attr(name[,value])|name是属性名称,value是属性值,如果省略value则返回当前属性值
d3.select("p").attr("class") 打印p标签的class属性
d3.select("p").attr("class","red") 设置p标签的class属性为red
selection.classed(name,boolean) 根据布尔值来设置class类
selection.style(name[,value[,priority]]) 设置样式
d3.select("p").style("clolor","red").style("font-size","30px") 分开写
d3.select("p").style({"color":"red","font-size":"30px"}) 一起写
selection.property(name[,value]) 部分属性不能用attr来获取,比如input的value属性,form表单中的元素使用property来获取

3.设置内容
selection.text([value]) 设置标签的文本,如果省略,则返回
selection.html([value]) 设置标签内的元素内容,如果省略,则返回

3.添加,插入和删除
selection.append(name) 末尾添加一个元素
selection.insert(name[,before]) 在指定元素before前添加元素,name是添加元素的名称,before是css选择器名称
selection.remove() 删除元素

例子

根据不同的值选择不同的样式

.style("color", function(d) {if (d > 15) { // 阈值是 15return "red";} else {return "black";}
});

批量设定属性

 .attr({x: function(d, i) { return i * (w / dataset.length); },y: function(d) { return h - (d * 4); },width: w / dataset.length - barPadding,height: function(d) { return d * 4; },fill: function(d) { return "rgb(0, 0, " + (d * 10) + ")";}});

参考文献:
https://stackoverflow.com/questions/31008991/d3-node-update-how-to-select-a-specific-text-element-among-multiple-ones

D3 selectselectAll相关推荐

从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探与我的计划书
缘起哈喽大家周四好!又是开心的一天,时间过的真快,我们的 <从壹开始 .net core 2.1 + vue 2.5 >前后端分离系列共 34 篇已经完结了,当然以后肯定还会有更新和修改 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
【D3】transition API
摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
交互式数据可视化－D3.js（一）
在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics),是用于描述二维矢量图形的一种图形格式,是由W3C制订的开放标准.SVG使用XM ...
r语言编辑 d3.js_d3.js的语言介绍
r语言编辑 d3.js by Matt Oxley 由马特·奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一 ...
d3.js图表_如何使用D3.js建立历史价格图表
d3.js图表逐步可视化财务数据集的方法 (A step by step approach towards visualizing financial datasets) It is a chall ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
d3设置line长度_使用d3画一些基本的图形
生成图标需要有四个步骤 1生成图片容器 2设置比例尺 3生成数据图表 4生成坐标系在展示图表时一般要有个容器,我们可以使用.container 类,同时制定宽高.如下: 可以加个样式 #contai ...

D3 selectselectAll

select方法(css选择器)

选择集selection

例子

D3 selectselectAll相关推荐

最新文章

热门文章