右側に複数選択テキストエリアを作成しました。
http://tinyurl.com/d2dbay5
背景をクリックして上下にスクロールしない限り、通常、選択を行うことはできません。それでも、別のフィールドを選択しようとすると、同じ問題が発生します。
また、グラフの周囲のテキストにカーソルを合わせると、左側のテキスト ボックスに値が入力されます。テキスト ボックスの 1 つに、部屋のフォームよりも多くのテキストがある場合、垂直スクロール バーが表示されます。しかし、データが少ないテキスト フィールドにカーソルを合わせて戻ってくると、スクロールバーが表示されなくなります。
textarea のコンテンツを選択できない理由は<div>、svg を作成する要素が which を介して配置されposition: absolute;、結果のサイズと組み合わせると<div>、ページの残りの部分の上にレンダリングされるためです。
z-index問題の要素の css に値を追加することで、ほとんどの最新のブラウザーでこれを解決できます。<div>選択可能なテキストを含むすべての要素z-indexに、svg 要素よりも高い値が必要です。
具体的には、これを現在の構造に合わせて、svg を含む div のインライン スタイルに次を追加できます。
z-index: 1;
そして、他の div (例: #legend、#legend_title、#right_section など) に影響を与える CSS 仕様のそれぞれに以下を追加します。
z-index: 2;