1

我正在构建一个带有附表的图表。两者的数据都来自带有用户提供数据的 html 输入元素。现在，我正在努力在用户单击提交按钮时更新表格。

用户第一次单击提交按钮时，表格会正确显示，但是，在随后的单击中，表格不会更新，即使基础数据已正确更新（全局变量cashflows包含用户输入的数据）。

代码如下所示，但我也有一个 jsfiddle： http: //jsfiddle.net/cyclical/xcGSu/5/ （选择加载示例数据按钮将填充一些示例数据）。

如果表格在第一次单击时正确更新，这是否表明数据已正确绑定到 DOM？

谢谢，尼尔

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

0 回答 0