function createRaws(data) {
const height = data.length * nameserverHeight + headerHeight + 2 * margin;
const svg = d3.select(DOM.svg(width, height)).classed("raws", true);
const g = svg
.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
const header = g
.append("g")
.attr("id", "header")
.selectAll("text")
.data(d => [
{ col: "nsRir", label: "RIR" },
{ col: "ns", label: "has nameservers" },
{ col: "asn", label: "in AS" },
{ col: "asHolder", label: "held by" },
{ col: "asRir", label: "allocated by" }
])
.enter()
.append("text")
.attr("text-anchor", "middle")
.attr("x", d => widths[d.col] / 2)
.attr("y", headerHeight / 2)
.attr("transform", d => `translate(${colX[d.col]},0)`)
.attr("fill-opacity", 0.7)
.text(d => d.label);
const raw = g
.append("g")
.attr("id", "raws")
.attr("transform", `translate(0,${headerHeight + margin})`)
.selectAll("g")
.data(d => data)
.enter()
.append("g")
.classed("raw", true)
.attr("id", d => d.ns)
.attr(
"transform",
(d, i) => `translate(0,${i * nameserverHeight + margin})`
);
const col = function(colName, color) {
const b = raw
.append("g")
.classed(colName, true)
.attr("transform", `translate(${colX[colName]},0)`);
b.append("rect")
.attr("fill", d => typeColorLU[d[color]].fillColor)
.attr("stroke", d => typeColorLU[d[color]].fillColor)
.attr("width", widths[colName])
.attr("height", nameserverHeight - 2 * margin);
b.append("text")
.attr("text-anchor", "middle")
.attr("x", widths[colName] / 2)
.attr("y", nameserverHeight / 2)
.attr("fill", d => typeColorLU[d[color]].color)
.text(d => d[colName]);
};
const nsRir = col("nsRir", "nsRir");
const ns = col("ns", "nsRir");
const asn = col("asn", "asRir");
const asHolder = col("asHolder", "asRir");
const asRir = col("asRir", "asRir");
return svg.node();
}