d3从同一个函数设置多个属性？

Question

有什么办法可以从同一个函数中设置多个属性吗？

d3.selectAll('.myshape') 
    .attr('y',function(d,i) { ... calculates something ... }) 
    .attr('height',function(d,i) { ... calculates something very similar... }) 

我想在同一时间计算y1和y2，然后设置y = y1和height = y2-y1。但是在d3中这样做的标准方式似乎是每个属性都有独立的功能。有没有更好的办法？

Answer 1

如果我正确理解你的问题，你有一个密集的计算，你想计算每个元素只有一次，属性无论数量你在设置。

既然如此，你可以使用一个each通过当前元素（this），用数据，索引和组一起，如果需要的话：

d3.selectAll(".myShape").each(function(d,i,n){ 
    //Here you put the complex calculation 
    //which will assign the values of y1 and y2. 
    //This calculation runs only once per element 
    d3.select(this).attr("y", y1).attr("height", y2 - y1) 
}); 

Answer 2

不完全。但是你可以用间接的方式解决问题。这增加了稍微更多的开销，但值得imo。 JS没有很好的“编译时间”（就js引擎而言），像C系列这样的宏，可以给你很好的扩展，而不需要运行时代价。

像这样（你可能已经知道）：

let myshape = d3.selectAll('.myshape') 

['y', 'height', ...].forEach(attr => myshape.attr(attr, calcAttr)); 

function calcAttr(a, i) { 
    // shared code 

    switch (a) { 
    case 'y': 
     //attr specific 
     break; 
    } 
}