Closed idkjs closed 7 years ago
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.
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.
How do you style the html element at the top of your file in the celljs context? In example below, I added a background-color class to the the top html tag.
Thanks.