情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.js+jsdom+D3によるDOMの使用(8)スタイルの取得と設定

DOMを使用するには下のようなモジュールを利用する方法があります。

  • jsdom
  • cheerio
  • d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事では要素のスタイルの取得と設定を行う方法を説明します。

スタイルの取得

要素のスタイルのプロパティの値を取得するには要素のセレクションのselection.style関数を使用します。

var d3 = require('d3');

var style = d3.selectAll('xxx').style('yyy');

第1引数にスタイルのプロパティ名を指定します。

返り値としてスタイルのプロパティの値が得られます。

ただし、セレクションが複数の要素のセレクションである場合には最初の要素のスタイルを取得します。

スタイルの設定

要素のスタイルのプロパティの値を設定するには要素のセレクションのselection.style関数を使用します。

var selection = d3.selectAll('xxx').style('yyy', 'zzz', 'important');
var selection = d3.selectAll('xxx').style('yyy', function (d, i, nodes) {
    return 'zzz';
}, 'important');

第1引数にスタイルのプロパティ名を指定します。

第2引数にスタイルのプロパティの値を指定します。

あるいは、要素にスタイルのプロパティの値を設定するための関数を指定することもできます。この関数の第1引数は要素のデータであり、第2引数は要素のセレクションにおけるインデックス(セレクションが複数のグループを有する場合にはグループ内のインデックス)であり、第3引数はセレクションにおいて要素が含まれているグループです。また、thisは要素となります。この関数では返り値として要素に設定するスタイルのプロパティの値を返すようにします。

第3引数にスタイルのプロパティの優先度を指定します。この引数は指定しなくても構いません。優先度を!importantにする場合にはimportantを指定します。

なお、スタイルのプロパティの値がnullである場合にはスタイルのプロパティを消去します。

サンプルコード1

d3-style.js

var jsdom = require('jsdom');

global.document = jsdom.jsdom(`
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <p id="p1" class="odd" style="color: red;">paragraph 1</p>
        <p id="p2" class="even" style="color: green;">paragraph 2</p>
        <p id="p3" class="odd" style="color: blue;">paragraph 3</p>
        <p id="p4" class="even" style="color: aqua;">paragraph 4</p>
        <p id="p5" class="odd" style="color: orange;">paragraph 5</p>
    </body>
</html>
`);

var d3 = require('d3');

console.log(d3.selectAll('#p1').style('color'));
console.log(d3.selectAll('#p2').style('color'));
console.log(d3.selectAll('#p3').style('color'));
console.log(d3.selectAll('#p4').style('color'));
console.log(d3.selectAll('#p5').style('color'));

d3.selectAll('p').style('color', 'black');
d3.selectAll('#p3').style('color', 'white');

console.log(d3.selectAll('#p1').style('color'));
console.log(d3.selectAll('#p2').style('color'));
console.log(d3.selectAll('#p3').style('color'));
console.log(d3.selectAll('#p4').style('color'));
console.log(d3.selectAll('#p5').style('color'));

使用パッケージ

  • jsdom
    npm install jsdomでインストールします。
  • D3
    npm install d3でインストールします。

実行結果

C:\work\node>node d3-style.js
red
green
blue
aqua
orange
black
black
white
black
black

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-d3.js, Node.js