Javascript D3更新数据，对html表中的行进行编号，在最后一列中设置SVG动画

我试图用D3更新HTML表中的数据。我需要更改多列中的数据，更新行数，并根据每个新数据数组在每行中设置SVG动画。我已经尝试过多次尝试、教程和文档，我相信这对于更有图书馆经验的人来说是很容易的

我在代码

tbody.selectAll（'tr'）.remove（）中注释了一个方法只需清除表中的所有行。但是，由于没有起始位置，因此无法设置SVG的动画

我目前的方法也是错误的，虽然我是D3新手，所以我不知道为什么。当新数据进入时，它不会正确地替换旧数据，但会基于新长度影响行长度，有时会替换，但通常会追加。点击“运行”，直到你看到id显示为一个较低的数字（例如“7”）。然后按update按钮，您将看到新数据不会更新行，而是根据新数组中的数字追加到行。因此，如果下一个数组恰好有8，那么您将看到一个8。如果下面是10，那么你会看到两个10。我敢肯定，一旦修复，它也会修复SVG动画


下面是我正在使用的通用代码

// create table, etc.
var table = d3.select('.chart').append('table');
var thead = table.append('thead');
var tbody = table.append('tbody');

// append the header row
thead.append('tr')
    .selectAll('th')
    .data(['id','val','svg']).enter()
    .append('th')
    .text(function (col_names) { return col_names; });

function update_table(){

  data = newdata(); // update data to display

  // remove existing rows
  // this basically resets the table element
  // but is not the right way
  //tbody.selectAll('tr').remove();

  // join new data with old elements, if any
  var rows = tbody.selectAll('tr')
        .data(data)
        .enter()
        .append('tr');

  // add first two columns
  rows.append('td').text(function(d) { return d.id; })
  rows.append('td').text(function(d) { return d.val; });  

  // add svg
  var svgcell = rows.append('td')
    .append('svg')
      .attr("width",20)
      .attr("height",20);  
  svgcell.append('circle').transition().duration(500)
    .attr("cx", 10)
    .attr("cy", 10)
    .attr("r", function(d) { return d.val; })
    .style("fill", "red");

   tbody.selectAll('tr').data(data).exit().remove();  
}

不确定这是否是正确的方法，但我通过在调用update函数后1秒应用transform属性为SVG设置了D3动画，并使其工作


//D3更新数据，对html表中的行进行编号，对最后一列中的SVG设置动画
函数newdata（）{
var n=[]；
var r=Math.floor（Math.random（）*20）；
对于（var i=0；i您的要求对于D3代码来说有点不寻常：您希望根据数据更新行，但不希望删除包含圆圈的
s…这排除了最简单的解决方案，即基于值列定义数据绑定函数的：

var rows = tbody.selectAll('tr')
    .data(data, function(d) {
        return d.val
    });

有了这个简单的解决方案，我的解决方案有点尴尬

首先，设置更新选择：

var rows = tbody.selectAll('tr')
    .data(data);

var rowsEnter = rows.enter()
    .append('tr');

rowsEnter.append('td')
    .attr("class", "idColumn")
    .text(function(d) {
        return d.id;
    });
rowsEnter.append('td')
    .attr("class", "valColumn")
    .text(function(d) {
        return d.val;
    });

rowsEnter.append('td')
    .append('svg')
    .attr("width", 20)
    .attr("height", 20).append('circle')
    .attr("class", "svgCircle")
    .style("fill", "red");

rows.exit().remove(); 

然后输入选择：

var rows = tbody.selectAll('tr')
    .data(data);

var rowsEnter = rows.enter()
    .append('tr');

rowsEnter.append('td')
    .attr("class", "idColumn")
    .text(function(d) {
        return d.id;
    });
rowsEnter.append('td')
    .attr("class", "valColumn")
    .text(function(d) {
        return d.val;
    });

rowsEnter.append('td')
    .append('svg')
    .attr("width", 20)
    .attr("height", 20).append('circle')
    .attr("class", "svgCircle")
    .style("fill", "red");

rows.exit().remove(); 

现在，按类选择所有列，重新绑定数据（这是我前面提到的棘手部分），并设置圆的转换：

d3.selectAll(".idColumn").data(data).text(function(d) {
    return d.id;
});
d3.selectAll(".valColumn").data(data).text(function(d) {
    return d.val;
});
d3.selectAll(".svgCircle").data(data).attr("cx", 10)
    .attr("cy", 10).transition().duration(500)
    .attr("r", function(d) {
        return d.val;
    })
    .style("fill", "red");

最后，退出选择：

var rows = tbody.selectAll('tr')
    .data(data);

var rowsEnter = rows.enter()
    .append('tr');

rowsEnter.append('td')
    .attr("class", "idColumn")
    .text(function(d) {
        return d.id;
    });
rowsEnter.append('td')
    .attr("class", "valColumn")
    .text(function(d) {
        return d.val;
    });

rowsEnter.append('td')
    .append('svg')
    .attr("width", 20)
    .attr("height", 20).append('circle')
    .attr("class", "svgCircle")
    .style("fill", "red");

rows.exit().remove(); 

下面是演示：


//D3更新数据，对html表中的行进行编号，对最后一列中的SVG设置动画
函数newdata（）{
var n=[]；
var r=Math.ceil（Math.random（）*20）；
对于（变量i=0；i


更新
这是一种方法，但它只影响SVG。更大的问题仍然存在；新数据不能正确替换旧数据，但会影响基于新长度的行长度，有时会替换，但通常会追加。“运行”JSFIDLE足够长，直到您看到id显示为一个较低的数字，然后按下更新按钮，您就会看到它。一旦这被修复，那么到SVG的转换应该是正确的，因为它将从前面的值开始。我用更多的细节更新了问题。因此，您希望删除表上的元素，并在添加了新元素？如果是这样，我所做的新编辑肯定回答了您的问题。再次感谢。但正如我在代码
tbody.selectAll（'tr'）.remove（）中指出的那样；
删除所有表行，这不是正确的方法。行刷新时，SVG也会这样做，并且从
0,0
而不是从其以前的状态设置动画。Gerardo这很好。因此，似乎我有两个问题：1）我需要选择行。enter（）不是行？和2）由于html表结构的分层问题以及我需要数据来更改行数（？）我需要一种替代方法来选择/将SVG输入最后一个单元格？1）是的，您需要有一个单独的“输入”和“更新”选择。实际上，您应该只使用“输入”和“退出”选择这里，因为你永远不会（可能）得到相同的随机数两次。但是，由于SVG问题，我们不得不设置一个“假”更新sel