D3.js v4で以下のページを参考にツリーレイアウトを作成しています。
https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
各ノードに画像を配置し、画像をクリックするとクリックされた画像の下にポップアップメニューが出てくる、ということをやりたいです。
ツリー構造に画像を表示するまではできたのですが、メニュー表示の処理ができません。
まずは画像を押したらその下に単純にrect要素を表示するよう以下のコードを書きました。
JavaScript
1 nodeEnter.append('image') 2 .attr('class', 'menu') 3 .attr('xlink:href', () => { return 'https://cdn3.iconfinder.com/data/icons/users/100/user_male_1-512.png'; }) 4 .attr('x', 58px) 5 .attr('y', -47px) 6 .attr('width', 32px) 7 .attr('height', 32px) 8 .on('click', () => this.showMenu(d3.select(this))); 9
JavaScript
1showMenu(self) { 2 self.append('rect') 3 .attr('x', 20) 4 .attr('y', -8) 5 .attr('width', 100) 6 .attr('height', 30) 7 .attr('fill', 'blue') 8 .attr('stroke', '#F2F2F2') 9 .attr('stroke-width', 1); 10 }
しかし、self.append('rect')のところで以下のエラーがブラウザのコンソールに表示されてしまいます。
Uncaught TypeError: Cannot read property 'createElementNS' of undefined
何が悪いのでしょうか?当方D3.js初心者になります。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/09 10:16