web-dev-qa-db-ja.com

D3.JSブラウザーのサポート

D3.JSの経験がある開発者は、実際にどの特定のブラウザーとブラウザーバージョンレベルがD3.JSライブラリを最も容易にサポートしているかを示すことができますか？

特定のブラウザーおよびブラウザーのバージョンレベルと互換性がないことがわかっているD3.JSの「コンポーネント」のリストはありますか？

D3.JS Webサイトは以下を提案しています。

ブラウザサポート

D3はいわゆる「モダン」ブラウザをサポートします。これは一般にIE8以下を除くすべてを意味します。 D3はFirefoxに対してテストされています。Chrome（Chromium）、Safari（WebKit）、OperaおよびIE9。D3の一部はコアとして古いブラウザで動作する可能性があります。 D3ライブラリには最小限の要件があります：JavaScriptとW3C DOM API IE8の場合、互換ライブラリAightをお勧めします。D3はSelectors APIレベル1を使用しますが、互換性のためにSizzleをプリロードできます。 CSS3トランジション。D3は互換性レイヤーではないため、ブラウザーが標準をサポートしていない場合は、運が悪くなります。ごめんなさい！」

しかし、私はもっと具体的な答えを望んでいました。

browsercross-browserd3.js
39
user1836288

私の意見では、これがライブラリの最も有用な部分であるため、ここで四肢に出て、SVGサポートとD3サポートを同等にするつもりです。

それを念頭に置いて、このリンクはそれをサポートする正確なブラウザのバージョンを提供する必要があります： http://caniuse.com/svg

これは、D3サイトから貼り付けたものと一致します。基本的にIEを除くすべての主要なブラウザーベンダーは、多くのバージョンでSVGをサポートしています。

あなたの質問は「実際に」と言っており、それはSVGを意味します。はい、DOMの非SVG部分でD3を使用するサンプルがあることは知っていますが、 gallery の例の大部分はSVGベースです。

25
explunit

D3は、SVGとCanvasを使用したデータ視覚化のための多くのヘルパーツールを備えたデータ操作用のライブラリです。

D3は、HTMLおよびSVGのすべての基本機能に直接アクセスできるように設計されています。つまり、ブラウザ間の互換性は、D3自体ではなく、コードが使用する要素と属性によって制限されます。

HTML5 および CSS ​​の例を次に示します。

// Requires HTML5
d3.select('body').append('nav');

// Requires CSS3 transformations
d3.select('div').style('transform', 'matrix(1, -0.3, 0, 1, 0, 0)');

[〜＃〜] svg [〜＃〜] および [〜＃〜] smil [〜＃〜] の場合：

// Requires SMIL
d3.select('rect').append('animate')
   .attr('attributeName', 'x')
   .attr('from', 10)
   .attr('to', 50);

および Canvas の場合：

// Requires Canvas
d3.select('body').append('canvas');

D3フレームワーク自体のみを検討する場合（たとえば、地理投影関数のみを使用し、DOM要素などを使用しない場合）、ブラウザのサポートにより ECMAScript 5 により、ブラウザ間の互換性が制限されますmap、forEachなどの頻繁な使用.

6
Christoph Körner