[英]RHS assignment manipulated over LHS manipulation
sap.ui.core.Control.extend("control.linechart", {
/* the control API */
metadata : {
properties : {
"items" : { type: "any" },
"height" : {type: "int"},
"width" : {type: "int"},
"popup" : {type: "any"}
},
events: {
"select" : {},
"selectEnd": {}
}
},
// the part creating the HTML:
renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance instead of "this" in the renderer function
oRm.write("<div");
oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
oRm.addClass("lineChart"); // add a CSS class for styles common to all control instances
oRm.writeClasses(); // this call writes the above class plus enables support for my.Bubble.addStyleClass(...)
oRm.write(">");
oRm.write("</div>");
},
onAfterRendering: function() {
data = this.getItems();
//alert(JSON.stringify(this.getItems()));
var passedheight = this.getHeight();
//var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
var containerWidth = $("#"+this.getId()).parent().width(); // gets immediate parent width
var margin = {top: 15, right: 30, bottom: 20, left: 30},
width = containerWidth- margin.left - margin.right,
height = passedheight - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").ticks(4).tickSize(-width, 0, 0);
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tonneValue); });
var svg = d3.select("#"+this.getId()).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var wsfs = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, tonneValue: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }),
d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var wsf = svg.selectAll(".wsf")
.data(wsfs)
.enter().append("g")
.attr("class", "wsf");
wsf.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" });
data.forEach(function(d) {
d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; });
});
var legend = svg.selectAll(".legend")
.data(legendNames.slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 4)
.style("fill", function(d) {return color(d); });
legend.append("text")
.attr("x", width - 24)
.attr("y", 6)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
},
});
在整個程序中,為什么右手邊的值會發生變化,即當我執行data = this.getItems();
我假設this.getItems
被分配給data
。 但是數據是在程序的其余部分進行操作的,但是當再次調用oAfterRendering
時,我得到的是在變量data
的操作data
。 當操作data
時,如何操作this.getItems() ie items property
由於使用Openui5和自定義控件,因此無法將數據保存在某個臨時變量中。
從函數返回對象時,JavaScript不會復制該對象,而是返回對其的引用(類似於C中的指針)。
這意味着,如果對其進行了修改,它將反映在所有指向它的變量中。
數組和其他對象的行為相同。
任何避免這種情況的方法。
您可以返回對象的副本 。 根據對象的復雜程度,可能需要深度克隆。 請記住,此操作不應經常執行,因為它可能會影響性能。
在ES6中創建淺層克隆的一種簡單方法(實際上只是復制屬性,在JavaScript中克隆任何對象更加細致)是...
var cloned = Object.assign({}, objectToBeCloned);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.