Javascript 在LHS操纵上操纵RHS分配 sap.ui.core.Control.extend（“Control.linechart”，{ /*控制API*/ 元数据：{ 特性：{ “项”：{type:“any”}， “高度”：{type:“int”}， “宽度”：{type:“int”}， “弹出窗口”：{type:“any”} }, 活动：{ “选择”：{}， “selectEnd”：{} } }, //创建HTML的部分： renderer:function（oRm，oControl）{//静态函数，因此在renderer函数中使用给定的“oControl”实例而不是“this” oRm.写（“”）； oRm.写（“”）； }, onAfterRendering:函数（）{ data=this.getItems（）； //警报（JSON.stringify（this.getItems（））； var passedheight=this.getHeight（）； //var containerWidth=jQuery.sap.byId（this.oParent.sId）.width（）| | 800；//获取超级父宽度 var containerWidth=$（“#”+this.getId（））.parent（）.width（）；//获取直接的父宽度 var margin={顶部：15，右侧：30，底部：20，左侧：30}， 宽度=集装箱宽度-margin.left-margin.right， 高度=通过高度-margin.top-margin.bottom； var parseDate=d3.time.format（“%d-%b-%y%H:%M%p”）.parse； var x=d3.time.scale（）.range（[0，width]）； 变量y=d3.scale.linear（） .范围（[高度，0]）； var color=d3.scale.category10（）； var xAxis=d3.svg.axis（） .比例（x） .东方（“底部”）； var yAxis=d3.svg.axis（） .比例（y） .orient（“left”）.ticks（4）.tickSize（-width，0，0）； var line=d3.svg.line（） .x（函数（d）{返回x（d.date）；}） .y（函数（d）{返回y（d.tonneValue）；}）； var svg=d3.select（“#”+this.getId（））.append（“svg”） .attr（“宽度”，宽度+边距。左侧+边距。右侧） .attr（“高度”，高度+边距。顶部+边距。底部） .附加（“g”） .attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）； color.domain（d3.keys（数据[0]）.filter（函数（键）{returnkey！==“date”}）； data.forEach（函数（d）{ d、 日期=解析日期（d.date）； }); var wsfs=color.domain（）.map（函数（名称）{ 返回{ 姓名:姓名,， 值：data.map（函数（d）{ 返回{date:d.date，tonevalue:+d[name]}； }) }; }); x、 域（d3.extent（数据，函数（d）{返回d.date；}））； y、 领域([ d3.min（wsfs，函数（c）{返回d3.min（c.values，函数（v）{返回v.tonevalue；}）；}）， max（wsfs，函数（c）{返回d3.max（c.values，函数（v）{返回v.tonevalue；}）；}） ]); svg.append（“g”） .attr（“类”、“x轴”） .attr（“变换”、“平移（0）”、“高度+”） .呼叫（xAxis）； svg.append（“g”） .attr（“类”、“y轴”） .呼叫（yAxis）； var wsf=svg.selectAll（“.wsf”） .数据（wsfs） .enter（）.append（“g”） .attr（“类别”、“wsf”）； 追加（“路径”） .attr（“类”、“行”） .attr（“d”，函数（d）{返回行（d.values）；}） .style（“笔划”，函数（d）{返回颜色（d.name）；}）； var legendNames=d3.keys（数据[0]）.filter（函数（键）{return key！==“date”}）； data.forEach（函数（d）{ d、 ages=legendNames.map（函数（名称）{return{name:name，value:+d[name]}；}）； }); var legend=svg.selectAll（“.legend”） .data（legendNames.slice（）） .enter（）.append（“g”） .attr（“类”、“图例”） .attr（“transform”，函数（d，i）{return“translate（0，+i*20+”）；}）； 图例。追加（“rect”） .attr（“x”，宽度-18） .attr（“宽度”，18） .attr（“高度”，4） .style（“fill”，函数（d）{返回颜色（d）；}）； 图例。追加（“文本”） .attr（“x”，宽度-24） .attr（“y”，6） .attr（“dy”，“.35em”） .style（“文本锚定”、“结束”） .text（函数（d）{return d；}）； }, });

在整个程序中，为什么右边的值在变化，即当我做

data=this.getItems（）时

我假设

这个.getItems

被分配给

数据

。但是数据在程序的其余部分被操纵，但是当再次调用

oAfterRendering

时，我会得到变量

data

中的操纵数据。

this.getItems（）即items属性

是如何在操作的

数据

时进行操作的。由于使用Openui5和自定义控件，无法将数据保存在某个临时变量中。

从函数返回对象时，JavaScript不会复制该对象，而是返回对该对象的引用（类似于C中的指针）

这意味着，如果它被修改，它将反映在指向它的所有变量中

这与数组和其他对象的行为相同

---

任何可以避免的事情

您可以返回对象的一个深度。根据对象的复杂程度，深度

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; });
                },
});

var cloned = Object.assign({}, objectToBeCloned);