时间戳

首页 > 解决方案 > 在分组条形图 D3 下对齐表格列

javascript - 在分组条形图 D3 下对齐表格列

问题描述

我正在尝试在组条形图下方对齐表格的列。我正在研究我发现的先前示例，但它并不完全存在，我不知道为什么。当 x 轴上的值较少时，它似乎工作得很好。

我已经设置了一个jsfiddle来显示我的问题。我正在尝试使用标签宽度和轴的带宽来设置我的表格列宽。它很接近，但并不完全准确。不知道我错过了什么。

这是我添加表格的地方：

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");

标签： javascripthtmlcssd3.js

解决方案

也许你应该设置你chart和table相同的宽度，即

d3.select(newTableSelector).attr("width",  width + margin.left + margin.right);

你应该注意的一点：

1.为两者设置最小宽度，否则表格内容将重叠
2.如果调整寡妇的大小，图表位置将发生变化，因为您为图表设置了变换属性.attr("transform", "translate(" + margin.left + "," + margin.top + ")")，但表格没有。

推荐阅读