https://github.com/jkutianski/d3-clone

D3js plugin for clone nodes from selections.
https://github.com/jkutianski/d3-clone

clone d3-module d3js node node-js node-module nodejs

Last synced: 2 months ago
JSON representation

D3js plugin for clone nodes from selections.

• Host: GitHub
• URL: https://github.com/jkutianski/d3-clone
• Owner: jkutianski
• License: bsd-3-clause
• Created: 2018-01-19T04:29:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-24T10:44:54.000Z (3 months ago)
• Last Synced: 2024-10-06T04:22:15.616Z (3 months ago)
• Topics: clone, d3-module, d3js, node, node-js, node-module, nodejs
• Language: JavaScript
• Homepage:
• Size: 264 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
d3-clone

========

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/f424dd4911324201a86c9543e192c4e6)](https://www.codacy.com/app/jkutianski/d3-clone?utm_source=github.com&utm_medium=referral&utm_content=jkutianski/d3-clone&utm_campaign=Badge_Grade)

[![dependencies Status](https://david-dm.org/jkutianski/d3-clone/status.svg)](https://david-dm.org/jkutianski/d3-clone)

[![devDependencies Status](https://david-dm.org/jkutianski/d3-clone/dev-status.svg)](https://david-dm.org/jkutianski/d3-clone?type=dev)

[![Known Vulnerabilities](https://snyk.io/test/github/jkutianski/d3-clone/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jkutianski/d3-clone?targetFile=package.json)

D3js plugin for clone nodes from selections.

The d3-clone add methods to append and insert a duplicate of the selection on which this method was called.

This methods copy all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy the data of the original selection.

You can see the running [example](https://github.com/jkutianski/d3-clone/tree/master/examples) on this [link](https://cdn.rawgit.com/jkutianski/d3-clone/5f755227/examples/cityscape.html)

Install

-------

To install via NPM use `npm install d3-clone`. You can also load directly from [unpkg.com](https://unpkg.com/d3-clone/build/d3-clone.min.js).

```html

```

How to use it

-------------

*Append clone*

```selection.appendClone(source)```

This example append the node selected by `svg.select('#source')` to each node selected from `svg.selectAll('.node')`.

```javascript

var nodes = svg.selectAll('.node')

    .exit().remove()

    .data(data).enter()

    .appendClone(svg.select('#source'));

```

if you've start with this HTML structure

```html





  






  






  




```

after run the code you'll have

```html





  


  






  


  






  


  




```


*Insert clone*

```selection.insertClone(source, before)```

This example insert the node selected by `svg.select('#source')` to each node selected from `svg.selectAll('.node')` before the `svg.select('#existing_node')`.

```javascript

var nodes = svg.selectAll('.node')

    .exit().remove()

    .data(data).enter()

    .insertClone(svg.select('#source'), svg.select('#existing_node'));

```

if you've start with this HTML structure

```html





  






  






  




```

after run the code you'll have

```html





  


  






  


  






  


  




```