Html merge方法,d3.js selection.merge()用法及代码示例

d3.js中的selection.merge()函数用于将两个给定的选择合并为一个，并在合并后返回新选择。返回的选择具有与此选择相同的组数和相同的父代。

用法:

selection.merge(other);

参数：该函数接受单个参数，其他描述选择将被合并。

返回值：该函数返回一个选择。

范例1：

HTML

1. This text is in bold

2. This text is also in bold

3. Geeks

4. Geeks

5. Geeks for geeks

// Filtering odd children

const odd = d3.selectAll("h3")

.select(function (d, i) {

return i & 1 ? this:null;

});

// Filtering even children

const even = d3.selectAll("h3")

.select(function (d, i) {

return i & 1 ? null:this;

});

// Merging both selections

const merged = odd.merge(even).nodes();

// Printing text content

console.log(

"Collection after merging odd and even is:")

merged.forEach((e) => {

console.log(e.textContent);

});

输出：

范例2：

HTML

1. This is odd

2. This is even

3. This is odd

4. This is even

5. This is odd

// Filtering odd children

var even = d3.selectAll("h5")

.select(function (d, i) {

return i & 1 ? this:null

});

// Filtering even children

var odd = d3.selectAll("h5")

.select(function (d, i) {

return i & 1 ? null:this

});

// Merging both selections

const merged = odd.merge(even).nodes();

even = even.nodes();

odd = odd.nodes();

console.log("Odd selection:")

odd.forEach((e) => {

console.log(e.textContent);

});

console.log("Even selection:")

even.forEach((e) => {

console.log(e.textContent);

});

// Printing text content

console.log(

"Collection after merging odd and even is:")

merged.forEach((e) => {

console.log(e.textContent);

});

输出：