Question

有两个功能：

 function drawWindows(windows, scale, svg){
        let myGroups = svg.selectAll('g').data(windows);
        let myGroupsEnter = myGroups.enter().append("g");
        myGroupsEnter.append("polygon")
            .style("fill", "green")
            ...
            });
  }



function drawDoors(doors, scale, svg){
            let myGroups = svg.selectAll('g').data(doors);
            let myGroupsEnter = myGroups.enter().append("g");
            myGroupsEnter.append("polygon")
                .style("fill", "red")
                ...
                });
      }

然后是主要绘制功能：

function draw(){

        var svg = d3.select('#test').append('svg');
        var scale = ...
        var doors = [...]
        var windows = [...]
        drawWindows(..);
        drawDoors(..)
}

问题是，窗户取代了门。如果我改变订单，反之亦然。如何保留两个单独的功能并仍然绘制两个？

Answer 1

你可以通过在门窗选择中添加一个类来实现，如下所示：

 function drawWindows(windows, scale, svg){
        let myGroups = svg.selectAll('.window').data(windows);//select all with class window
        let myGroupsEnter = myGroups.enter().append("g").classed("window", true);
        myGroupsEnter.append("polygon")
            .style("fill", "green")
            ...
            });
  }



function drawDoors(doors, scale, svg){
            let myGroups = svg.selectAll('.door').data(doors);//select all with class door
            let myGroupsEnter = myGroups.enter().append("g").classed('door', true);
            myGroupsEnter.append("polygon")
                .style("fill", "red")
                ...
                });
      }

D3替换对象

1 个答案: