VisualforceでD3.jsによるグラフの描画を試してみました #Salesforce

勉強用に購入した本に記載されていたサンプルコードを使用してVisualforceページでのグラフ描画を試してみました。試してみて少し悩んだことが2つ。一つはURLを指定したD3.jsの読み込みで発生したエラーです。

もしかしてと思ってURLではなく静的リソースにアップロードしたファイルを読み込ませたら正常に実行できました。Salesforce StackExchangeでも同じ方法で回避していると投稿がありました。

How to integrate D3.JS with Visual force
http://salesforce.stackexchange.com/questions/44634/how-to-integrate-d3-js-with-visual-force

もう一つはVisualforceページで表示したときだけ、レイアウトが崩れる現象です。

こちらは、ページ内のhタグが原因でした。VFページではhタグがブロック要素として認識されないので、CSSでブロック要素として扱うように宣言する必要があります。

VFページでCSSを扱うときですが、迂闊に要素のスタイルを変更すると標準のスタイルに影響がでてしまうことがあります。divタグで囲って指定ID内の要素に対してスタイルを適用という形にするのが一番安全だと思います。

<apex:page showHeader="true">
    <head>
        <title>横棒グラフ</title>
        <apex:includeScript value="{!$Resource.d3minjs}" />
        <style type="text/css">
            #vf-page h1,
            #vf-page h2,
            #vf-page h3,
            #vf-page h4,
            #vf-page h5,
            #vf-page h6 {
                display: block;
            }            
        </style>
    </head>
    <body>
        <div id="vf-page">
            <h1>横棒グラフ</h1>
            <svg id="myGraph"></svg>
        </div>
        <!-- Js -->
        <script type="text/javascript">
            // 横棒グラフのデータ
            var dataSet = [300, 130, 5, 60, 240];
            // データに基づいて描画する
            d3.select('#myGraph')
                .append('rect')
                .attr('x', 0)
                .attr('y', 0)
                .attr('width', dataSet[0])
                .attr('height', '20px');
        </script>
    </body>
</apex:page>