D3 select&selectAll

最新推荐文章于 2024-09-03 17:16:44 发布

Claroja

最新推荐文章于 2024-09-03 17:16:44 发布

阅读量1.1w

点赞数 1

分类专栏： D3 文章标签：可视化

本文链接：https://blog.csdn.net/claroja/article/details/79866991

版权

D3 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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) { // 阈值是 15
 return "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