Comments (5)
Added insert(tagName, referenceSelector)
. For example, insert("div", ":first-child")
prepends child nodes.
from d3.
Note a difference is that (at least with Chrome 37 and D3 3.4.6) JQuery's prepend() will insert before any text node content while D3's insert(...,':first-child') will only insert before normal nodes, not text nodes.
from d3.
Also, it might be nice for these methods to allow references to existing nodes, via the W3C DOM API (e.g., document.getElementById("foo")
). But then it seems like you'd want to support the argument being a function, and not just a string... in which case, perhaps the function could return the node to insert (or return a string for the name of the node to create?).
If we allowed a function, perhaps that would allow the function to use a selector internally, especially if apply
returned the array of matched nodes.
from d3.
I like the idea of a prepend
method for adding to the front. For inserting at a given location, a simple way to implement that is an insertAfter
method, which creates a new node that is inserted after the context node, rather than as a child of the context node. This makes it easy to chain siblings together, as well:
d3.select("div")
.append("span").attr("class", "sibling-1")
.insertAfter("span").attr("class", "sibling-2")
.insertAfter("span").attr("class", "sibling-3");
The alternative would be require capturing a reference to the selected div:
var div = d3.select("div");
div.append("span").attr("class", "sibling-1");
div.append("span").attr("class", "sibling-2");
div.append("span").attr("class", "sibling-3");
Or a way to select the parent. But you get the idea.
from d3.
I guess we could name it insert
for brevity, though I like the idea of doing before and after. And I think after should be the default, since insert-before is a bit awkward.
from d3.
Related Issues (20)
- Security vulnerability issues HOT 1
- Add harmonic mean and geometric mean HOT 1
- API doc links in example notebooks still point to README HOT 5
- searching “range” or “extent” doesn't find the expected page
- How to build this chart
- d3.min and d3.least don't always ignore nulls HOT 4
- Adopt a monorepo
- grid color not applied for the left axis column number 1
- cycle at stratify err
- D3 graph into Flutter web
- Remember ui State across reloads HOT 1
- Nodes arrange
- Replace Math.random() with crypto function HOT 4
- Non english language texts being cut off HOT 4
- Zoom and click on d3 Sankey
- What does mean the sample code?
- #How to remove spaces between bar in d3.js grouped bar chart.
- d3 hierarchy: node visibility parameter to control either to show node in visualization or hide it.
- the wrong parameter name at Binning data of d3-array documentation
- Upgrading from v3 to v7 requires additional renders for my custom gauge
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3.