web-dev-qa-db-ja.com

Internet Explorer 10がsvgパスを表示しない（d3.jsグラフ）

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

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

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

javascriptinternet-explorersvgd3.jsinternet-explorer-10
20
Letterman

概要：

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

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

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

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

元の投稿：

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

元の例からcssとjavascriptを取り出し、jsfiddleに配置しました。リンクはChrome 26（これは私の種類の制御テストでした）では正しく表示されましたが、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で<path>タグの1つを見つけ、右側の[スタイル]タブで[path.link]スタイルのチェックを外して再チェックしました。

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

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

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

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

更新：

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

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

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

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

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

29
nickiaconis

他のマーカーの質問 クリスチャン・ランドによる優れた回答があり、私にとって非常にうまくいきました。

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

私のフォースアニメーションには、次のような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がそれらを再レンダリングし、すべてが世界に適しています。

これでIE 10の問題が修正されたようです...もちろん、このパッチはIE 10にのみ追加することをお勧めします

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

11
talkol

これがすでに解決されているかどうかはわかりませんが、グラフは、比較したすべてのブラウザーでほぼ同じように見えます。私はIE10を持っていませんが、IE9で問題なく表示され、グラフの静的コピーを NetRenderer's 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">

これが コードペンの例 静的バージョンのマークアップを使用しています。 NetRendererで自分でテストしたい場合は、これが fullpage url です。

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

0
James Holderness