クアルトリクスのアンケート Web サイトで使用するために、フォース レイアウトを使用して d3 ビジュアライゼーションをまとめています。jsfiddleのさまざまなブラウザーですべてが機能しているようです。手本ボックス（アフリカ男性など）から手本をメインキャンバスにドラッグすることができます。メイン キャンバスのノードを右クリックすると、右クリック メニューが表示され、ノードのプロパティを変更したり、キャンバス内でノードをドラッグしたりできます。
javascript too large to paste.
jsfiddle は Internet Explorer 11 で動作することに注意してください。ただし、このビジュアライゼーションを Qualtrics Web サイトに追加すると、IE11 で機能しなくなります。下の画像に示すように、データよりもはるかに多くの SVG 要素が追加されています。
Qualtrics と d3 視覚化のこの組み合わせは、Firefox、Chrome、および Safari で正常に機能することに注意してください。残念ながら、クアルトリクスのサポート チームはカスタム コードをサポートしておらず、私はこれを追跡できるほど JavaScript に精通していません。これを引き起こす原因についてのアイデアはありますか？
これを Qualtrics で機能させるには:
- Qualtrics ヘッダーに d3.js ライブラリを追加します。
- コメント解除
Qualtrics.SurveyEngine.addOnload - コメントアウト
create_d3_interaction(false);
更新 1
これをもう少しデバッグしました。
このupdate_svg_nodeメソッドでは、SVG 要素を選択します。
var svg = d3.select('.' + svg_class);
var nodes = svg.selectAll('.' + class_id)
.data(f.nodes());
--で問題が発生しているようですselectAll-- 何らかの理由で、クラスの選択とデータが一致していません。これは Qualtrics と IE11 でのみ発生しますが、フィドルの IE11 では正常に動作することに注意してください。これはフィドルの更新版ですが、問題は同じように発生することに注意してください。
したがって、UPDATE クラスにあるはずのノードが、何らかの理由で ENTER クラスにあります。