我正在制作一张带有附表的图表。两者的数据来自html输入元素,其中包含用户提供的数据。现在,我正在努力让用户点击提交按钮时更新表格。
用户第一次单击提交按钮时,表格会正确显示,但是,在后续点击中,即使基础数据已正确更新(全局变量cashflows
包含用户 - ),表也不会更新输入数据)。
代码如下所示,但我也有一个jsfiddle:http://jsfiddle.net/cyclical/xcGSu/5/ (选择Load Sample Data按钮将填充一些样本数据)。
如果表格在第一次点击时正确更新,是否表明数据已正确绑定到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);