20

たとえば、このグラフを開くと 、IE10のhttp://bl.ocks.org/mbostock/1153292で、ノード間のリンクが表示されません。

Internet Explorerでも表示できるようにするために、コードでできることはありますか？

IEはsvgの一部を無視しているようです...それを表示する方法が見つかりませんでした。

4

3 に答える 3

29

概要：

IEには、マーカー付きのパスが不適切にレンダリングされる原因となるバグがあります。マーカーが削除された元のコードは問題なくレンダリングされます。

3つの解決策があります：

  1. マーカーを使用しないでください
  2. 次のようにパスにマーカーを埋め込みます：http：//jsfiddle.net/niaconis/3YsWY/9/
  3. Microsoftがこのバグを修正するのを待つ

オプション2は少し醜いですが、おそらく最も実行可能です。

元の投稿：

残念ながら、Jamesの回答は静的svgに対してのみ機能することがわかりました。

元の例からcssとjavascriptを取り出し、jsfiddleに配置しました。リンクはChrome26では正しく表示されましたが（これは私の一種の制御テストでした）、IE 10ではまったく表示されませんでした（予想どおり）。次に、Jamesの回答に従って、リンクの作成を処理するjavascriptを編集しました。

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

これにより、指定された属性が<g>要素に追加されましたが、「ライブ」グラフの表示には影響しませんでした。（今振り返ってみると、ここに示すように、これらの属性がなくても、「静的」グラフにIE10のリンクが表示されていることがわかりました。）

IEの開発者ツールバーを使用して、IE10で（元の例でも直接）リンクを表示することができました。DOMでタグの1つを見つけ<path>、右側の[スタイル]タブで[path.link]スタイルのチェックを外して再度チェックしました。

これにより、表示するリンクが取得されますが、その後のグラフとの相互作用により、マーカーがリンクの端から切断されます。それらは単にその場にとどまります、そして私はそれらを再付着させるものを何も見つけませんでした。

関連性があると思われる唯一の情報源は、このSO投稿です。開発者ツールバーで編集するまで要素はIE7に表示されません
。 ただし、私はsvgにかなり慣れていないため、どのようにすればよいか少しもわかりません。そこで説明されている修正をsvgに移植します（その修正はhtml要素に対するものでした）

多分これは誰かが正しい方向に向かうのを助けるでしょう？

PSこれが正確な答えではないことはわかっています。これをジェームズの答えへの返信として投稿しただけですが、それを行うのに十分な評判がないようです。= \

アップデート：

結局のところ、この問題は完全にマーカーに関連しています。このフィドルは元のコードですが、マーカーが削除されており、リンクは問題なく表示されます。マーカーの問題は以前に文書化されており、IE10の重大なバグです。なぜリンクも消えてしまうのか、わかりません。

このフィドルは回避策を提供します。リンクのパスに各マーカーを直接エンコードしたため、これは最もクリーンなソリューションではありませんが、機能します。

誰かがマーカーの問題自体の回避策を見つけることができれば、それはより良いでしょう、そしてそれは他のマーカーの質問への答えとして追加で投稿されるべきです。

（注：私のソリューションでは、破線のリンクがひどく見えるので、代わりに水色にしました。）

このバグはMicrosoftに報告されていますが、これまでのところ、彼らはそれを否定または無視しているようです。Microsoftの課題追跡Webサイトのこの投稿にアクセスし、このバグを再現できることを示すリンクをクリックしてください。たぶん私たちは彼らの注意を引くことができますか？

于 2013-05-08T21:27:07.827 に答える
11

もう1つのマーカーの質問には、クリスチャン・ランドによる優れた回答があり、非常にうまく機能しました。

そこに行く手間を省くために、ここに物事の要点があります：

私のフォースアニメーションには、tick次のような関数があります。

force.on("tick", function() {
  ...
});

linkまた、次のように定義された変数内にすべてのグラフリンクを保持します。

var link = svg.selectAll(".link").data(links).enter() ...

ここで、Christianによって提案された魔法を実装するために、tick関数の先頭に次の行を追加しました。

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

すべてのマーカーをそのまま残しました。この小さな不思議なことは、アニメーションのティックごとにすべてのリンクノードを調べて、それらをDOMに再度追加することです。これにより、IE 10はそれらを再レンダリングし、すべてが世界に適しています。

これでIE10の問題が解決するようです...もちろん、このパッチをIE10にのみ追加することをお勧めします

これがうまくいくなら、他の質問に行き、クリスチャンに賛成票を与えることを忘れないでください

于 2013-08-27T20:39:48.793 に答える
0

これがすでに解決されているかどうかはわかりませんが、グラフは、比較したすべてのブラウザーでほぼ同じように見えます。私はIE10を持っていませんが、IE9で問題なく表示され、NetRendererのIE10でグラフの静的コピーをテストしましたが、それも問題ありませんでした。

私が見ることができた唯一の違いは、IEが一部のリンクに実線の矢印を表示しなかったことであり、それらのマーカータイプの塗りつぶしスタイルを設定するだけで簡単に解決できました。

marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

アップデート：

追加した画像を見ると、IE9やNetRendererのバージョンのIE10で見ているものとはまったく異なります。複数のコンピューターで試しましたか？それはおそらくあなたのセットアップに固有のものですか？

問題を再現できずに提案を行うことは困難ですが、試してみたいことの1つは、CSSを介さずにSVGで直接パスプロパティを設定することです。

したがって、最初のg要素には次のようなものがあります。

<g fill="none" stroke-width="1.5px" stroke="#666">

静的バージョンのマークアップを使用したcodepenの例を次に示します。NetRendererで自分でテストしたい場合は、ここにフルページのURLがあります。

それが理想的な解決策ではない場合でも、少なくともそれが違いを生むかどうかを知ることは役に立ちます。

于 2013-05-04T14:38:22.510 に答える