The avatar for @embracelife
深度碎片
as simple as possible
Published
D3 documentation
Edited
Nov 16, 2019
1 fork
D3 documentation
Utilsd3.selection.attrd3.selection moduled3 documentation templated3.timeParse(specifier)d3.selection.removed3.selection.merged3.selection.insertd3.selection.exit()d3.selection.datad3.selection.enterThinking with Joinsd3.selection.append(type)d3.selection.selectAlld3.selection.style
d3.selection.attr
d3.selection.appendd3.selection.selectd3.selectAll docd3.select()d3-selection Doc Introd3.selection()D3 Documentation on Observable
Insert cell
html`<h1 id="yes">d3.selection.attr</h1>`
Insert cell
wrapper = d3.select("h1")
.append("svg")
.attr("width", 100)
Insert cell
set_attr_height = wrapper
.attr("height", function(d, i, nodes){
return 100;
})
Insert cell
access_attr_width = wrapper.attr("width")
Insert cell
access_h1_attr_id = d3.select("h1").attr("id") // see h1's attr, in this case only global attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Insert cell
set_attr_height_null = wrapper.attr("height", null).attr("height");
Insert cell
set_attr_style_color_red = d3.selectAll("p").attr("style", "color: red")
Insert cell
set_attr_style_color_for_each_p = d3.selectAll("p").attr("style", function(d, i, nodes){ return (i % 2 !== 0) ? "color: blue" : "color: green"})
Insert cell
d3 = require("https://cdn.jsdelivr.net/npm/d3@5.12.0/dist/d3.js");
Insert cell
Insert cell
Insert cell
d3.select("h1").property("textContent") // textContent is a property not attr
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more