如何避免D3.js选择属性函数中重复的代码

时间:2017-02-23 09:38:43

标签: javascript d3.js typescript

对于我的项目,我在D3图表上显示网络数据(交换机,路由和站点) 所有这些设备都是相连的。为了将设备相互连接,我列出了所有交换机的所有设备。 然后,我为每个设备画一条线到相应的开关。

在enter()和update()中我操纵X1,Y1,X2,Y2属性,我的问题是如何避免两次调用函数。 在以下代码中:let eqt = SwitchesHelper.getEqtFromEquipmentName(d, this.ACS.equipments.switches)是一个非常耗时的函数,在enter()中调用两次,在update()中调用两次。 是否有可能只计算一次eqt?

感谢您的帮助。

let switchesToPortEquipments = this.switchesToPortEquipmentsGroup.selectAll('line')
        .data(SwitchesHelper.getArchiEquipments(this.ACS.equipments.switches));
    switchesToPortEquipments.exit().remove();
    switchesToPortEquipments.enter()
        .append('line')
        .attr('x1', (d) => {
            let eqt = SwitchesHelper.getEqtFromEquipmentName(d, this.ACS.equipments.switches);
            if (eqt !== null) {
                return eqt.x;
            }
        })
        .attr('y1', (d) => {
            let eqt = SwitchesHelper.getEqtFromEquipmentName(d, this.ACS.equipments.switches);
            if (eqt !== null) {
                return eqt.y;
            }
        })
        .attr('x2', (d) => {
            let eqt = SwitchesHelper.getEquipmentFromName(d, this.ACS);
            if (eqt !== null) {
                return eqt.x;
            }
            else {
                return 0;
            }
        })
        .attr('y2', (d) => {
            let eqt = SwitchesHelper.getEquipmentFromName(d, this.ACS);
            if (eqt !== null) {
                return eqt.y;
            }
            else {
                return 0;
            }
        });

    switchesToPortEquipments
        .attr('x1', (d) => {
            let eqt = SwitchesHelper.getEqtFromEquipmentName(d, this.ACS.equipments.switches);
            if (eqt !== null) {
                return eqt.x;
            }
        })
        .attr('y1', (d) => {
            let eqt = SwitchesHelper.getEqtFromEquipmentName(d, this.ACS.equipments.switches);
            if (eqt !== null) {
                return eqt.y;
            }
        })
        .attr('x2', (d) => {
            let eqt = SwitchesHelper.getEquipmentFromName(d, this.ACS);
            if (eqt !== null) {
                return eqt.x;
            }
            else {
                return 0;
            }
        })
        .attr('y2', (d) => {
            let eqt = SwitchesHelper.getEquipmentFromName(d, this.ACS);
            if (eqt !== null) {
                return eqt.y;
            }
            else {
                return 0;
            }
        });

0 个答案:

没有答案