I'm currently facing an issue with aligning the columns in my table below a Group Bar Chart. I started with a similar example I found, but it's not working as expected especially when there are more values on the x-axis.
To demonstrate my problem, I have created a sample jsfiddle. My approach involves using label width and axis bandwidth to determine the column widths for my table. While it's getting close, it's not completely accurate and I can't seem to pinpoint the error.
Below is the section where I insert the table:
var tableData = [];
tableData = totalBaseSalesTableData;
var newTableSelector = "#table6";
var newTableColWidth = x0.bandwidth();
var newTableHeaderColWidth = 100;
// var barPadding = x1.range()[1] - x1.range()[0] - x1.bandwidth();
// Bind data to placeholder rows
var tr = d3.select(newTableSelector).selectAll("tr")
.data(tableData)
.enter().append("tr");
// Populate table
var td = tr.selectAll("td")
.data(function(d) {
return d;
})
.enter().append("td")
.style("color", function(d) {
let temp;
temp = d;
if (isNaN(temp)) {
return z(temp)
} else {
return "black";
}
})
.text(function(d) {
let temp;
temp = d;
if (isNaN(temp)) {
return temp;
} else {
return temp + "%"
}
});
// Style header column
var tdHeader = tr.select("td")
.attr("width", newTableHeaderColWidth + (labelWidth / 2))
.style("font-weight", "bold")
.style("font-size", "12px")
.style("text-align", "center");
// Style data cells
var tdData = tr.selectAll("td:not(:first-child)")
.attr("width", newTableColWidth + labelWidth)
.style("text-align", "center")
.style("font-size", "12px");