D3js、selectAll（rect）でrectを選択するとキャッチされない参照エラー

Question

私はD3を使ってグラフを作成しています。私は、ユーザーが1列の水平縦棒グラフに積み重なった棒のサイズを変更することによって選択を入力できるようにしたい。

バーは積み重ねられ、それぞれに.call（ドラッグ）イベントリスナーがあります。

このドラッグイベントはエラーを返します。

var drag = d3.behavior.drag() 
    .on('drag', function() { 

     var i = state.interactingWith //i represents current element 
     var rects = d3.select('.svg').selectAll('.bar') //Get all stacked bars 
     var handles = d3.select('.svg').selectAll('.handle') //Get all event handlers, on the edges of bars 
     var currentX = d3.select(rects[0][i]).attr('x') 

     d3.select(rects[0][i]) 
      .attr('width', d3.event.x - currentX) 
     d3.select(handles[0][i]) 
      .attr('cx', d3.event.x) 

     if (i < rects[0].length-1){ 

      var j = i+1 //I want to select the next element, but not if this element is the last 
      var currentNextWidth = d3.select(rects[0][j]).attr('width') //This returns the error 
      var newNextWidth = currentRightWidth + (+d3.event.x - currentX) 

      d3.select(rects[0][j]) 
       .attr('x', d3.event.x)     
      d3.select(rects[0][j]) 
       .attr('width', newRightWidth) 
      questions[i].displayWidth = newRightWidth 

     } 
    }) 

コンソールは言う：

Uncaught TypeError: Cannot read property 'getAttribute' of null .... d3.min.js:3 

は、それは私が必要なインデックスを持つJを交換した場合、問題のある行が期待どおりに動作しますが、var currentNextWidth ....

であると言います。 誰でもここで何が起こっているかについてのアイデアはありますか？

Answer 1

あなたはvariable stateとstate.interactingWithがどのように取得されたかについて言及していません。違反行にデバッグポイントを置き、コンソールでrect [0] [j]をログに記録して、これらが現在のスコープで利用可能であることを確認してください。

Answer 2

OKですので、state.interactWithは文字列です。

iは文字列であり、それ自体は問題なく動作します。 i + 1が再生されます。

私は何が起こっていますがi（文字列）array['1']として動作しますが、array['11']としてi + 1作品だと思います。