JSHintの警告を避けるために、このJavascriptコードをどのように書き直すのですか？

Question

私は、HTML、JavaScript（Angular 1.5.0）& CSSを使用する小さなWebアプリケーションを開発している初心者です。私はGruntを使って、jslintを処理して、javascriptとCSSファイルを小さくしています。私のJavascriptコードには、d3.jsによって作成されたSVGイメージが含まれています。

私は現在、jshintから次の警告を取得しています：

line 1932 col 32 Don't make functions within a loop. 

は、どのように私はこの警告を解消するには、以下のコードを書き換えることができますか？

Line #1924  for (var j = 0; j <= 5; j++) { 
Line #1925   var myVarX = j * 100; 
Line #1926   var myVarY = j * 200; 
Line #1927   var myText = self.svgContainer.append("text") 
Line #1928   .attr("x", myVarX) 
Line #1929   .attr("y", myVarY) 
Line #1930   .text("Hello World") 
Line #1931   .attr("fill", "black") 
Line #1932   .attr("transform", function(d){ 
Line #1933    var bb = this.getBBox(); 
Line #1934    leftBoundary = bb.x + (bb.width/(-2)); 
Line #1935    return "translate(" + (bb.width/(-2)) + ", 0)"; 
Line #1936    } 
Line #1937   ) 
Line #1938   if (leftBoundary > centerX + 5) 
Line #1939   myText.style("display", "block"); 
Line #1940   else 
Line #1941   myText.remove(); 
Line #1942  } 

Answer 1

移動するループの範囲外この

function(d){ 
    var bb = this.getBBox(); 
    leftBoundary = bb.x + (bb.width/(-2)); 
    return "translate(" + (bb.width/(-2)) + ", 0)"; 
} 

を。同様に：

var transformCallback = function(d) { 
    var bb = this.getBBox(); 
    ... 

と、関数の代わりにtransformCallbackを使用しています。

.attr("transform", transformCallback) 

Answer 2

Function.prototype.getTransform = function() { 
    var bb = this.getBBox(); 
    leftBoundary = bb.x + (bb.width/(-2)); 
    return "translate(" + (bb.width/(-2)) + ", 0)"; 
}; 

... 

for (var j = 0; j <= 5; j++) { 
    var myVarX = j * 100; 
    var myVarY = j * 200; 
    var myText = self.svgContainer.append("text") 
    .attr("x", myVarX) 
    .attr("y", myVarY) 
    .text("Hello World") 
    .attr("fill", "black") 
    .attr("transform", this.getTransform()) 
    if (leftBoundary > centerX + 5) 
    myText.style("display", "block"); 
    else 
    myText.remove(); 
} 

Answer 3

Line 1924 : Change `j++` to `j+=1` 
Line 1932: Take out the function def outside the loop. Define it outside and use it here 

// function defined outside the loop 
function transformFn(d) { 
    var bb = this.getBBox(); // if using jQuery replace this with $(this) or that/self to ensure correct this binding 
    leftBoundary = bb.x + (bb.width/(-2)); 
    return "translate(" + (bb.width/(-2)) + ", 0)"; 
} 


// function used at Line1932 
.attr('transform', transformFn) 

残りは私にはよさそうです。

Answer 4

もう1つさらにD3- ishアプローチは、外側forループを完全に取り除くでしょう。あなたがD3のステートメントの周りにループを見つけると、これは深刻な疑惑を引き起こすはずです。これを回避するには、強力なデータバインディング機能を使用できます。

d3.selectAll("text") 
    .data(d3.range(6).map(function(d) {   // data binding replaces for-loop 
    return { 
     x: d * 100, 
     y: d * 200, 
     remove: false       // used to mark the texts for removal 
    }; 
    }))        
    .enter().append("text") 
    .text("Hello World") 
    .attr("x", function(d) { return d.x; }) // replaces myVarX 
    .attr("y", function(d) { return d.y; }) // replaces myVarY 
    .attr("fill", "black") 
    .attr("transform", function(d){ 
     var bb = this.getBBox(); 
     // mark texts for removal based on the condition 
     d.remove = (bb.x + (bb.width/(-2))) <= centerX + 5; 
     return "translate(" + (bb.width/(-2)) + ", 0)"; 
    }) 
    .style("display", "block") 
    .filter(function(d) { return d.remove; }) // select all texts marked for removal 
    .remove(); 

これはD3の純粋主義者がとる方法です。すべてがデータにあります！このアプローチでは、データオブジェクトを使用して、位置xおよびyのすべての情報と、フラグremoveを保持します。これは、ある条件に基づいてテキストを削除するかどうかを示すために使用されます。 forループを削除することとは別に、myVarXとmyVarYのようないくつかの他の変数を取り除き、いくつかの要素を削除するためにブロックを統合します。