K4750.NET

SVG tref element

SVGのtref要素についての単なるメモ。

Mozilla Firefox 24、IE 10ではtref要素は現状、未実装であり使えない。Mozilla Firefoxについては、SVG 1.1仕様への対応状況が「SVG in Firefox | MDN」にて確認できるが、tref要素について「Not implemented」となっている。

他のブラウザについては、Google Chrome 30、Opera 16では問題なく使用できることを確認した。Safariについては未確認（※2）。

※1 全てWindows 7 Professional SP1 (64bit) 環境での確認。
※2 現バージョンのGoogle Chrome、Operaについては、HTMLレンダリングエンジンがBlinkなので、BlinkのベースとなったWebKitを使用しているSafariでも使えるのではなかろうか（後日確認（※3））。
※3 Safari 6（＠Mac OS X）にて使用できることを確認した（2013/10/12）。

SVG Recipe

SVGのサンプルページ「SVG Recipe（SVGレシピ）」について。

D3.js（Data-Driven Documents）を使うための基礎知識であるSVG（Scalable Vector Graphics）で遊んだ軌跡を「SVG Recipe」に残すこととした。

目的はSVGで遊ぶ過程で得た様々な記述方法等を記録し、レシピのようにして参照できる状態にしておくことにある。公開時点では基本図形のサンプルが一つだけであるが、今後少しずつ増やしていき、年内（2013年内）にはSVGの各要素・属性のサンプルを一巡したいと思う。


１．参考

本家のリファレンスの他にも、サンプルの充実したサイトが世には沢山ある。感謝。


２．その他

「SVG Recipe」作成にあたり、WordPressのカスタム投稿／カスタム分類（とそのためのテンプレート）、ショートコードに初めて触れた。また、「SVG Recipe」のトップページは、可変グリッドレイアウトを実現するためにMasonry（JavaScript grid layout library）を使っている。躓いた点、有用と思われる情報については追々本サイトで触れていきたい。

サーバーサイドD3（Yet another）

サーバーサイドでD3.jsを使うにあたり「GUNMA GIS GEEK」を参考にさせて頂いたが、簡単ではなかったので本サイトなりに注意点等をまとめてみる。

なお、サーバーサイドでD3.jsを使う（本サイトの）目的は、WEBサーバー（Ubuntu 12.04.3 LTS）にてNode.js＋D3.jsを使用してSVGファイルを生成し、そのファイルをブラウザのIMG要素にて参照・表示させることにある。


１．準備

まず、Node.jsおよびD3.jsの現時点の最新版をサーバにインストールする。詳細は過去の投稿を参照。概要は以下のとおり。

  1. node-v0.10.18.tar.gzのビルド・インストール（パッケージ版はバージョンが古いため）
  2. npmコマンドにてD3.jsをインストール（-g（Global install）付き）
  3. サンプルコードを実行（NODE_PATH環境変数を設定）

また、svgファイルを置く予定のWEBサイトの.htaccessファイル等に以下を追記しておく。

AddType image/svg+xml .svg

２．ひな形

サーバーサイドで実行する.jsファイルのひな形（JSONファイルを読み込んで、SVGファイルを出力する）の構成は以下のようになる。

var d3 = require("d3");

/* サイズ（650×250）やマージンを定義する */
var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 650 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

/* svgタグを生成する */
var svg = d3.select("body")
    .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("version", "1.1")
      .attr("xmlns", "http://www.w3.org/2000/svg");

/* CSSを記述するためのstyleタグを生成する */
svg
  .append("defs")
    .append("style")
      .attr("type", "text/css")
      .text("..."); // ここにCSSの内容を記述する。

/* JSONファイルを読み込む */
var data = require('./data.json');

/* dataを元に、svg変数に様々な操作等を行い、SVGデータを生成する */
...

/* SVGファイルのお約束（？）を出力する */
console.log('<?xml version="1.0" standalone="no"?>');
console.log('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">');

/* SVG要素を出力する */
console.log(d3.select("body").node().innerHTML);

SVGとCSSとの関連付けについては、上記の方法（defs/styleタグを使用する）の他に、「外部ファイル化する」方法と「個々の要素にstyle属性を都度記述する」方法がある。詳細はこのあたり（日本語）を参照。


３．サンプルコード

sysstatで収集したCPU使用率のデータから折れ線グラフを生成するD3.jsのサンプルコードを以下に示す。なお、本サンプルは、D3.js本家のGalleryにある「Multi-Series Line Chart」を参考にしている。


４．実行結果

jsonファイルとjsファイルを同じディレクトリに格納し、nodeコマンドを実行する。

$ NODE_PATH=/usr/local/lib/node_modules node sar-u2svg.js > sar-u.svg

生成されたSVGファイルをIMGタグで表示すると以下となる。

%idle平均99.62だからね。。(´・ω・｀)

← Older 1 / 1 Newer →