d3 元素中的堆叠规则
d3元素堆叠规则
d3 自创的元素,例如 circle、line、rect等对很多css属性并不适用。
例如 myline.style(‘z-index’, 20) 并不会生效。
不过 对于 div 等原生html元素可以起作用。
例如 mydiv.style(‘z-index’, 20) 可以起作用
d3 自创元素的堆叠是根据元素创建的先后顺序来定的。后创建的元素会覆盖先创建的元素。
不过,当使用group的时候,后创建的group里面的所有元素都会在上层(离用户更近)
let group1 = svg.append('g')
let group2 = svg.append('g')
let circle = group2.append('circle').attr('r', 10)
let rect = group1.append('rect').attr('width', 10).attr('height', 10)
circle会覆盖rect。即使circle先创建。