소개

블록 다이어그램을 작성해 보았을 때 d3.js는 SVG 드로잉 도구로도 좋을 것이라고 생각했습니다. 에서는, 복수행 텍스트를 구형내에서 수직·수평 방향으로 중앙 정렬하도록(듯이) 구현했습니다. 이번에는 이것을 발전시켜 수직 방향의 위쪽 정렬 · 중앙 정렬 · 아래쪽 정렬과 수평 방향의 왼쪽 정렬 · 중앙 정렬 · 오른쪽 정렬을 선택할 수 있도록 기능 확장하여 재사용 가능한 d3.js 플러그인으로 구현 시도했습니다.

d3.js 플러그인을 만드는 방법

d3.js를 확장하는 방법

d3.js - How to make a d3 plugin? - Stack Overflow 에는 플러그인을 만드는 방법에 관하여 Q&A가 있습니다. d3.selection의 프로토 타입을 확장하는 예 도 소개되고 있습니다만, 프로토 타입 오염을 피해 함수로 구현 하고 세 c 지온 s. 칼 를 부르는 것이 표준적인 방법입니다.

만드는 방법의 예

아래의 기사를 참고로 했습니다.

Simple example of reusable d3 plugin.

/chapter: 3B-The-Reusable-Api / Developing a D3.js Edge

플러그인 구조

Simple example of reusable d3 plugin. 의 기사의 플러그인의 구조는 다음과 같은 느낌입니다.

d3.textBlock = function() {
    // プロパティ定義とデフォルト値設定
    var label = "";

    function my(selection) {
        selection.each(function(d, i) {
            // ここにプラグイン固有の処理を実装
        });
    }

    // labelプロパティのゲッター／セッター
    my.label = function(value) {
        if (!arguments.length) return value;
        label = value;
        return my;
    };

    return my;
}

d3.textBlock 는 세 c 지온 s. 칼 에 건네주는 함수로서 정의하는 것이 아니라, 그러한 함수를 돌려주는 함수 (고층 함수)로서 정의하고 있습니다.
my関数 는 클로저로 되어 있고, label 를 프로퍼티로서 정의해 디폴트치와 getter/setter를 준비하고 있습니다.

사용법의 예

d3.textBlock() 로 세 c 지온 s. 칼 에 건네주는 함수를 만들어, label property를 디폴트치로부터 바꾸고 싶은 경우는 이하와 같이 setter를 호출해 변경합니다.

var tb = d3.textBlock().label(function(d) {return d.label;});

var item = svg.selectAll("rect")
    .data(items)
  .enter()
    .append("svg:g")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(tb);

이번에 만든 플러그인

출처: hnakamur/d3-multiline-text-plugin

데모: htps : // h 나카무 r. 기주 b. 이오 / d3 - 무 l 치네 - xt p ㅅ 긴 /

데모 소스: htps : // 기주 b. 이 m/h 나카무 r/d3-무l 치에네 xtp㎅ 긴/bぉb/gh 퍼게 s/그리고 x. HTML

아래 스크린샷의 위쪽 그림(Common example)에 대응하는 JS 코드는 다음과 같습니다.

https

function createCommonExample() {
  var frameWidth = 680;
  var frameHeight = 84;

  var svg = d3.select("#commonExample").append("svg")
    .attr({
      width: frameWidth,
      height: frameHeight
    });

  var rects = [
    {x:  20, y: 2, w: 200, h: 80, text: 'This is a common\nexample.'},
    {x: 240, y: 2, w: 200, h: 80, text: 'The same alignments\nin these text blocks'},
    {x: 460, y: 2, w: 200, h: 80, text: 'verticalAlign: center\nhorizontaiAlign: left'}
  ];

  var g = svg.selectAll('g.block')
    .data(rects).enter().append('g')
    .attr({
      class: 'block',
      transform: function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      },
    });

  g.append('rect')
    .attr({
      'width': function(d) { return d.w; },
      'height': function(d) { return d.h; },
      'fill': 'none',
      'stroke': '#00C9F9',
      'stroke-width': 1
    });

  g.append('text').call(d3.multilineText().verticalAlign('center').horizontalAlign('left'));
}

플러그인의 소스는 아래의 7개의 프로퍼티를 정의하고 있어, 상기의 예에서는 그 중 verticalAlign과 horizontalAlign의 2개를 설정해 나머지 5개는 디폴트치를 사용하고 있습니다.

https

  var lineHeight = 1.4;
  var horizontalAlign = 'center'; // 'left', 'center', or 'right'
  var verticalAlign = 'center'; // 'top', 'center', or 'bottom'
  var paddingTop = 10;
  var paddingBottom = 10;
  var paddingLeft = 10;
  var paddingRight = 10;

스크린샷

감상

블록 다이어그램을 작성해 보았을 때 d3.js는 SVG 드로잉 도구로도 좋을 것이라고 생각했습니다. 의 코드와 비교하면 이용측의 코드는 대단히 깨끗이 했습니다.

구형을 그리는 부분등도 플러그 인화해 가면, 이용하는 측은 데이터 정의와 플러그인 호출만으로 좋아져 가기 때문에, 한층 더 쾌적하게 될 것 같습니다.