javascript d3 selectAll 转换为循环

Question

我在下面有这个代码。有两个 .attr 添加到“路径”中，它们使用相同的功能。是否可以将此代码转换为一个循环，在该循环中我只能调用一次函数并使用两个 .attr 的值？

            var edges = svgGroup.selectAll('path .edge').data(artifacts).enter().append('path')
            .attr('class', 
                function(d){
                    if (getStatusActive(d.targetName)){
                        return 'edge';
                    }else{
                        return 'edge_grey';
                    }
                }
            ).attr('marker-end', 
                function(d){
                    if (getStatusActive(d.targetName)){
                        return 'url(' + markerLocation + '#arrowhead)';
                    }else{
                        return 'url(' + markerLocation + '#arrowhead_grey)';
                    }
                }                
            );

我正在寻找这样的东西:

            for (each element of selectAll / data(artefacts)){
                var result = getStatusAcive(d.targetName);
                //create with result both strings and add them to the attr
                ...
                ...
                element.append('path').attr('class', resultString1).attr('marker-end',resultString2);
            );

谢谢!

Answer 1

由于字符串的值取决于数据，因此您无法像您想要的那样替换它。但是，您可以在单独的步骤中计算该字符串，将其绑定(bind)到数据，然后使用它，即

data.forEach(function(d) {
  if (getStatusActive(d.targetName)){
    d.resultString1 = "edge";
    d.resultString2 = 'url(' + markerLocation + '#arrowhead)';
  }else{
    d.resultString1 = "edge_grey";
    d.resultString2 = 'url(' + markerLocation + '#arrowhead_grey)';
  }
});

sel.attr("class", function(d) { return d.resultString1; })
   .attr("marker-end", function(d) { return d.resultString2; })