Comments (2)
kingoftheknoll
commented on June 10, 2024
1
If I understand your question correctly, this is not something that you'd want to do with cell. Rather I don't think there's a good case for mutating the html tag ever, maybe the body element.
Using an example provided elsewhere by the author, cell will inject into the element with the id we specify. However it will blow away the DOM at and below where it's injected. So if you run this snippet below you'll rewrite the whole DOM.
<html id="viz">
<script src="https://rawgit.com/intercellular/cell/plan/cell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<body></body>
<script>
var gene = {
_sampleSVG: null,
id: "viz",
$cell: true,
_r: 40,
_cx: 50,
_cy: 50,
_width: 100,
_height: 100,
_color: 'red',
$init: function(){
var self = this;
this._sampleSVG = d3.select(this)
.append("svg")
.attr("width", this._width)
.attr("height", this._height);
this._sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", this._r)
.attr("cx", this._cx)
.attr("cy", this._cy)
.on("mouseover", function(){d3.select(this).style("fill", self._color);})
.on("mouseout", function(){d3.select(this).style("fill", "white");});
}
};
</script>
</html>
But if you want to inject on the body element you can set the style attributes there. If you want to set the style on the html tag, use the DOM api to do it.
from cell.
idkjs
commented on June 10, 2024
Thought I would point it out because the docs say that the API matches the DOM 1-to-1 so I figured I was missing how to correctly access this element. Thank you.
from cell.
Related Issues (20)
- Define a variable's attribute using another attribute of itself HOT 1
- Devise a way to express CSS in cell HOT 1
- $update not fired when components have a $init defined HOT 2
- Cell Native? HOT 5
- Safari Issues HOT 2
- Assigning $text from component won't update DOM. HOT 4
- $update not being triggered/called HOT 1
- ES6 functions HOT 1
- Distinguish between SVG <text> elements and normal text HOT 1
- Scoped CSS HOT 1
- Break out createElementNS(Hardcoded) into Monkey-Patchable Function - GeneReader ? HOT 1
- Can you share an example with react components?
- Suggestion : Limiting complexity of inter-cell dependency HOT 1
- js-framework-benchmark
- Select multiple and attribute order
- Handy way to get cell components
- Injecting CellJs via external file HOT 1
- Using web components with Cell
- mutation of a cell HOT 1
- Development Moved to https://github.com/jasonelle/jasonelle HOT 2
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 cell.