2011-04-26 11 views
4

優れたD3.jsデータ視覚化ライブラリ(http://mbostock.github.com/d3/)の使用を開始しました。Internet Explorerにthis.style.setPropertyを理解させる方法はありますか?

結果はFirefoxとChromeではうまく機能しますが、IEではうまく機能しません。 1つの問題は、IEで認識されないthis.style.setPropertyとthis.style.removePropertyがD3によって大量に使用されているようです。

誰かが回避策やシムなどを知っているのだろうか? (私のJavaScriptはかなり貧弱ですが、BTW)。

+0

このようなサウンドは、.attr( 'propname'、 'value')がJQueryで達成するタイプのものです。おそらく、d3ライブラリのsetPropertyの定義をハッキングすることによって、いくつかのタイプのラッパーを作成することができます。 JQueryはクロスブラウザーを使用します。 –

答えて

0

.classed( 'class'、true/false)はどうですか?これはIE9で完璧に動作します:

function mouseOver(d, i) { 
    var element = d3.select(this); 
    var alreadyHasClass = element.classed('className'); // boolean 
    element.classed('cssClass', !alreadyHasClass); // set/remove class 
} 

をところで、それは「スタイル」に情報を追加するよりも、要素にクラスを追加/削除高速です。

+0

いい考えですが、悲しいことに私の場合はありません。私は、データ駆動型の関数を使って要素を遷移させています。ポジショニング。クラスの追加と削除はこれを行いません。 d3は内部的にstyle.setPropertyを使用してこれを行います。 – jamesfm

+0

例を挙げることができますか?私はデータに基づいて自分の要素(パス、ポリゴンなど)を配置し、変換/変換を使用してそれを移動します。 IE9ではうまく動作します。 –

+0

申し訳ありません - 私はSVG要素ではなくHTMLを操作するためにd3を使用しています。あなたは[patientstori](http://patientstori.org.uk/)で構築したものを見ることができます – jamesfm

0

私は最新のバージョン2.1.3がこれを解決すると信じています。見てみましょう。

+0

これはありがたいです - 新しいバージョンを試しましたが、そのトリックはしませんでした。明確にするために、私はページ上のHTML要素をスクロールするためにd3を使用しています。コメントの下に現在のバージョンにリンクしている。 – jamesfm

+2

関連するコミットは[c2e3735](https://github.com/mbostock/d3/commit/c2e37352ac84eb8b4be89feed90bc2249866f715)です。バージョン2.0.5と思う。しかしそれはIE9のサポートを追加するだけです。私はOPが公式にサポートされていないIE8以下を求めていると思う。しかし、[回避策](https://github.com/mbostock/d3/issues/199#issuecomment-1487129)があります。 – mbostock

1

私は同じバグで戦ってきましたが、あなたはスタイルを変更するときに次のパターンを使って簡単に解決できます。

element.style("property", "value"); 

これは、値は常に文字列であることが絶対必要です。さもなければ文字列を扱うことができるので、IE9では奇妙な文字エラーが発生します。

D3JS 3.2.8でテストしました。

関連する問題