使用动态 svg 作为文本背景创建表

Question

我的目标是创建一个包含两列的简单表，其中一列应该有一个 svg 元素作为背景，并根据其他一些值进行缩放。

如您所见，我能够将 svg 插入表格中，但我有两个问题，首先表格的宽度太宽，其次我想要文本后面的 svg。

我怎么能做到这一点？

这是我的 function 用 d3js 创建表。

function tabulate1(data, dtype, columns) {

    var table = d3.select('#ranking_div1').append('table').classed('rankingtable',true)
    var thead = table.append('thead')
    var tbody = table.append('tbody');

    // append the header row
    thead.append('tr')
      .selectAll('th')
      .data(columns).enter()
      .append('th')
        .text(function (column) { return column; });

    // create a row for each object in the data
    var rows = tbody.selectAll('tr')
      .data(data[dtype])
      .enter()
      .append('tr');

    // create a cell in each row for each column
    var cells = rows.selectAll('td')
      .data(function (row) {
        return columns.map(function (column) {
          return {column: column, value: row[column]};
        });
      })
      .enter()
      .append('td')
      .style("text-align","left")
        .text(function (d) { return d.value; })

    var rmax = Math.max(...data[dtype].map(data => data.Rate))
    var cellelem = document.getElementsByTagName('th');

    const xScale_table = d3.scaleLinear()
        .domain([0,rmax])
        .range([0, cellelem[1].offsetWidth]);

    var rate = rows
        .append('svg')
        .attr('width',d => xScale_table(d.Rate))
        .attr('height',d => cellelem[1].offsetHeight)
        .style('background-color','#d3d3d3')
        .style('z-index','-1')
        .attr('transform',`translate(-${cellelem[1].offsetWidth},0)`);

  return table;
}

// render the tables
tabulate1(DummyData5,'Titel', ['Name', 'Anzahl']);

这是我的代码的 output。

提前致谢！