D3.js 数据更改时HTML表未更新

我正在制作一张图表，附带一张表格。两者的数据都来自html输入元素以及用户提供的数据。现在，我只是在用户单击submit按钮时更新表

用户第一次单击“提交”按钮时，表将正确显示，但是，即使基础数据已正确更新（全局变量<代码>现金流包含用户输入的数据），在随后的单击中，表也不会更新

代码如下所示，但我还有一个JSFIDLE： （选择“加载样本数据”按钮将填充一些样本数据）

如果表在第一次单击时正确更新，这不表示数据已正确绑定到DOM吗

谢谢， 尼尔

var$s=d3.format（“，.2f”）；
函数sampleData（）{
d3.选择（“#cf1”）[0][0]。值=50000；
d3.选择（“#dt1”）[0][0].value=“2007-05-10”；
d3.选择（“#cf2”）[0][0]。值=20000；
d3.选择（“#dt2”）[0][0].value=“2011-01-11”；
d3.选择（“#cf3”）[0][0]。值=50000；
d3.选择（“#dt3”）[0][0].value=“2012-07-19”；
d3.选择（“#cf4”）[0][0]。值=40000；
d3.选择（“#dt4”）[0][0].value=“2012-08-03”；
d3.选择（“#endMV”）[0][0]。值=190551.29；
d3.选择（“#结束日期”）[0][0].value=“2013-09-30”；
}
d3.选择（“样本”）
。打开（“单击”，采样数据）；
var现金流=[]；
var合计=0；
var-irr=0；
//将现金流数组绑定到表以显示
var列标题=[“日期”，“现金流”，“天数”，“内部收益率现金流]；
var列=[“日期”，“现金流量”，“天数”，“内部收益率现金流]；
d3.选择（“#结果”）。选择全部（'table'）。数据（[0]）。输入（）。追加（'table'）；
var table=d3。选择（“表格”）；
table.selectAll（'thead'）。数据（[0]）。回车（）。追加（'thead'）；
var thead=table.select（'thead'）；
table.selectAll（'tbody'）。数据（[0]）。回车（）。追加（'tbody'）；
var tbody=表。选择（'tbody'）；
table.selectAll（'tfoot'）。数据（[0]）。回车（）。追加（'tfoot'）；
var tfoot=table.select（'tbody'）；
//追加标题行
附件（“tr”）
.selectAll（“th”）
.数据（列标题）
.输入（）
.附加（“th”）
.attr（“align”，函数（d）{if（d='Date'）{return“left”}else{return“right”}）
.text（函数（列）{返回列；}）；
函数calculateIRR（）{
现金流=[]；
风险价值=[]；
var cfdates=[]；
//获取现金流
d3.选择全部（“输入.现金流”）[0]
.forEach（函数（d，i）{
if（d.value）{cfvalues.push（1*d.value）}；
}
)
//约会
d3.选择全部（“input.cfdate”）[0]
.forEach（函数（d，i）{
if（d.value）{cfdates.push（d.value）}；
}
)
//获取结束MV和相关日期；MV乘以-1
cfvalues.push（-1*d3.select（“#endMV”）[0][0].value）；
cfdates.push（d3.select（“#endDate”）[0][0].value）；
//将日期字符串转换为日期对象
var dates=cfdates.map（函数（d）{返回新日期（d.replace（/-/g，“/”）}）；
//计算内部收益率；使用5%作为起始值
var率=XIRR（CFV值，日期，.05）；
内部收益率=利率；
var r=d3。选择（“比率显示”）。选择全部（“div”）
.数据（[费率]）
.输入（）
.附加（“div”）
.attr（“等级”、“费率”）
.text（函数（d，i）{return“IRR:+d}）；//{return“IRR:+dollars（d）++”}）；
var len=cfvalues.length；
var last_day=日期[len-1]；
//构造用于绑定的最终现金流数组
对于（var i=0；i

在随后的单击中，您必须处理更新和退出选择以及输入选择以更改显示的值。参见，例如，谢谢，拉尔斯。。。我最初定义了行和单元格变量，并且有

rows.exit（）.remove（）；cells.exit（）.remove（）（见上文更新）；但是我会得到错误
TypeError:rows.exit不是一个函数
。在你的情况下，更重要的是更新选择。谢谢Lars，我正在取得一些好的进展；我已经添加了更新和退出选项。我现在遇到的唯一问题是，实际上只更新了表的第一行。。。其他人则不然。我已经更新了小提琴：事实上，我发现了最后一个问题，现在全部解决了（JSFIDLE更新）。谢谢你的帮助，拉尔斯。
var dollars = d3.format(",.2f");

function sampleData() {
    d3.select("#cf1")[0][0].value=50000;
    d3.select("#dt1")[0][0].value = "2007-05-10";
    d3.select("#cf2")[0][0].value = 20000;
    d3.select("#dt2")[0][0].value = "2011-01-11";
    d3.select("#cf3")[0][0].value = 50000;
    d3.select("#dt3")[0][0].value = "2012-07-19";
    d3.select("#cf4")[0][0].value = 40000;
    d3.select("#dt4")[0][0].value = "2012-08-03";
    d3.select("#endMV")[0][0].value = 190551.29 ;
    d3.select("#endDate")[0][0].value = "2013-09-30";  
}

d3.select("#sample") 
     .on("click", sampleData); 


var cashflows = [];
var total = 0;
var irr = 0;

// bind the cashflows array to a table for display 
var column_titles = ['Date','Cashflow','Days','IRR Cashflow'];
var columns = ['date','cf','days','irr_cashflow'];

d3.select("#results").selectAll('table').data([0]).enter().append('table');
var table = d3.select('table');

table.selectAll('thead').data([0]).enter().append('thead');
var thead = table.select('thead');

table.selectAll('tbody').data([0]).enter().append('tbody');
var tbody = table.select('tbody');

table.selectAll('tfoot').data([0]).enter().append('tfoot');
var tfoot = table.select('tbody');


// append the header row
thead.append("tr")
    .selectAll("th")
    .data(column_titles)
    .enter()
    .append("th")
    .attr("align", function(d) {if (d=='Date') { return "left"} else { return "right"}})
        .text(function(column) { return column; });



function calculateIRR(){ 

        cashflows = [];

    var cfvalues = [];
    var cfdates = [];

    // get cashflows
    d3.selectAll("input.cashflow")[0]
        .forEach(function(d,i) { 
            if (d.value) {cfvalues.push( 1 * d.value )}; 
            }
         )


    // get dates
    d3.selectAll("input.cfdate")[0]
        .forEach(function(d,i) { 
            if (d.value) {cfdates.push( d.value)}; 
            }
         )

    // get ending MV and associated date; MV is multiplied by -1
    cfvalues.push(-1 * d3.select("#endMV")[0][0].value);
    cfdates.push(d3.select("#endDate")[0][0].value);

    // convert date strings to date objects
    var dates = cfdates.map(function(d) { return new Date(d.replace(/-/g, "/"))});

    // calculate the IRR; use 5% as starting value 
    var rate = XIRR(cfvalues ,dates, .05);  
    irr = rate;


var r = d3.select("#ratedisplay").selectAll("div")
   .data([rate])
     .enter()
     .append("div")
     .attr("class","rate")
        .text(function(d,i) {return "IRR: " + d}); //{return "IRR:" + dollars(d) + ""});


    var len = cfvalues.length;
    var last_day = dates[len -1];

    // construct final cashflow array for binding
    for (var i = 0; i < len; i++) {  
        var cf_days = moment(last_day).diff(moment(dates[i]), 'days');

        var irr_cashflow = FV(rate, cf_days/365 , 0, cfvalues[i],0);
        total += irr_cashflow;

                cashflows.push(
                {'cf': cfvalues[i], 'date': dates[i], 'days' : cf_days, 'irr_cashflow': irr_cashflow}       
            );
    };


var rows = tbody.selectAll("tr")
    .data(function(d) {return cashflows} )
    .enter()
    .append("tr");



var cells = rows.selectAll("td")
    .data(function(row) {
        return columns.map(function(column) {
            return {'name': column, 'value': row[column]};
        });
    })
    .enter()
    .append("td")
    .attr("align",function(d) {
        if (d.name == 'date') { return "left" } else {return "right"}
    })
        .html(function(d) { 
           if (d.name == 'date') {
                return d3.time.format("%Y-%m-%d")(d.value);
           } else {
                return dollars(d.value);
           }     
        });


rows.exit().remove(); 
cells.exit().remove();

}

d3.select("#submit") 
     .on("click", calculateIRR);