I'm currently learning about creating tables in D3 and I have a question regarding when to use ".select()":
For example, when constructing circles:
var circles = svg.selectAll("circle")
.data(dataSet)
.enter()
.append("circle")
.attr("r", 2.5)
.attr("cx", function(d){ return d.x})
.attr("cy", function(d){ return d.y});
First select an empty circle element then append the circle
However, when building a table,
The code below directly appends the table without first selecting("table"). The same goes for "tr".
function tabulate(data, columns) {
var table = d3.select("#container").append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
(source: "creating a table from csv")
Why doesn't the following code work?
function tabulate(data, columns) {
var table = d3.select("#container")
.select("table")
.append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
Thank you in advance,