d3常用API及使用心得

1、记得用svg标签包裹元素，否则查看元素属性都正确，显示却是一片空白。

2、应该使用第一种写法，第二种写法会导致不居中显示，整个图在左上角。

let svg = d3.select("#basic-topo");
let clientRect = svg.node().getBoundingClientRect(),
    width = +clientRect.width,
    height = +clientRect.height;

let svg = d3.select("#basic-topo"),  
    width = +svg.attr("width"),  // 第二种写法
    height = +svg.attr("height");

第三种写法，用类来封装

let TopologyGraphLayout = function(vm, selector) {
  var self = this;
  this.vm = vm;

  this.width = $(selector).width();
  this.height = $(selector).height();
    
  this.zoom = d3.zoom().on("zoom", this.zoomed.bind(this)); // 监听缩放事件
  this.svg = d3
    .select(selector)
    .append("svg")
    .attr("width", this.width)
    .attr("height", this.height)
    .call(this.zoom)
    .on("dblclick.zoom", null);
}

3、ID选择器不要使用"."，否则在使用 selection.select 时会报错

在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。

4、将对象转为数组的方法

d3.keys - 列举关联数组的键。
d3.values - 列举关联数组的值。
d3.entries - 列举关联数组的键值对实体。

5、映射

d3.map - 创建一个空的map。
map.has - 返回map中是否包含某个值。
map.get - 获取值。
map.set - 设置值。
map.remove - 移除值。
map.clear - 移除所有值。
map.keys - 获取键数组。
map.values - 获取值数组。
map.entries - 获取键值对数组。
map.each - 为每个元素调用一次指定的方法。
map.empty - 返回map是否为空。
map.size - 计算值的数量。

6、集合

d3.set - 创建一个空的set。
set.has - 返回set中是否包含某个值。
set.add - 添加指定值。
set.remove - 删除指定值。
set.clear - 移除所有值。
set.values - 获取值数组。
set.each - 为每个元素调用一次指定的方法。
set.empty - 返回set是否为空。
set.size - 计算值的数量。

7、选择元素

d3选择，插入，删除元素

d3.selection - 选择根文档元素。
d3.select - 从文档中选择一个元素。
d3.selectAll - 从文档中选择多个元素。
selection.select - 选择每个选中元素的一个后代元素。
selection.selectAll - 选择每个选中元素的多个后代元素。
selection.filter - 基于数据过滤元素。
selection.merge - 合并两个选择。
d3.matcher - 测试一个元素是否匹配选择器。
d3.selector - 选择一个元素。
d3.selectorAll - 选择多个元素。
d3.window - 得到节点的所有者窗口。

8、修改元素

selection.attr - 设置或获取特性。
selection.classed - 获取，添加或移除CSS类。
selection.style - 设置或获取样式。
selection.property - 设置或获取行内属性。
selection.text - 设置或获取文本内容。
selection.html - 设置或获取inner HTML。
selection.append - 创建，添加或选择新的元素。
selection.remove - 移除文档中的元素。
selection.sort - 基于数据给文档中的元素排序。
selection.order - 重排列文档中的元素以匹配选择中的顺序。
selection.raise - 重新排列每个元素为父元素的最后一个子节点。
selection.lower - 重新排列每个元素为父元素的第一个子节点。
d3.creator - 通过名称创建元素。

9、数据绑定

理解update，enter，exit的使用

selection.data - 元素和数据绑定。
selection.enter - 获得进入（enter）选择器（数据无元素）。
selection.exit - 获得退出（exit）选择器（元素无数据）。
selection.datum - 获取或设置元素的数据（不绑定）。

d3常用API及使用心得

猜你喜欢