[D3.js] 버전에 따른 사라진 함수 복원

---

예전에 처음 D3.js를 공부할 때 제일 애먹은 부분이 버전 별 함수가 변경 되거나 또는 사리지는 함수들 때문에 유튜브 동영상 강좌를 보면서 현재 버전을 공부할 때 에러와의 싸움에서 무지 답답하고 귀찮았습니다. 오늘 다루는 사라진 함수를 사용하고 싶을 때 복원하는 방법을 다루고자 합니다.

1. d3.svg.diagonal() 함수

---

V3 버전에서 사용되는 함수인데 V4버전에서는 사라진 함수입니다. 이 함수를 사용하면 V4버전 부터는 에러가 뜹니다. 물론 V5버전에서 에러가 뜨겠죠. 이 곡선과 유사한 곡선을 물론 V4버전에서 제공되는데 이 곡선함수를 사용하고 싶을 때에는 V3버전을 링크 걸어서 사용해야 합니다.

하지만, 꼭 링크를 걸어서 사용할 필요는 없습니다. d3.js를 공부하시는 분들이라면 이 함수를 복원하고 싶은 충동을 느끼신다면 한번 직접 만들어 봐야 겠죠.

우선 V3 버전으로 곡선을 그려 보고 분석 해보도록 하죠.

V3버전 d3.svg.diagonal() 함수 사용 :

<svg height="300" width="300" style="background: yellow">
</svg>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>
var diagonal = d3.svg.diagonal()
      .source({x:10,y:10})
      .target({x:290,y:290});
var path = d3.select("svg").append("path")
      .attr("fill","none")
      .attr("stroke","#0000ff")
      .attr("stroke-width","1.5px")
      .attr("d",diagonal);
</script>

[결과]

위 결과는 V3버전에서 사용할 경우에 한해서 결과가 출력합니다. V4버전 이후 부터는 사용 할 수 없습니다.

2. d3.svg.diagonal() 함수 곡선 분석

---

이 함수를 복원하기 위해서는 HTML 문서 상에서 어떤 코딩으로 곡선이 그려지는지 분석해야 합니다.

한번 위 예제소스를 실행시켜서 나온 결과에 오른쪽 마우스 버턴을 클릭하여 소스창보기를 할까요.

<path d="M10,10C10,150 290,150 290,290" stroke-width="1.5px" stroke="#0000ff" fill="none"></path>

위의 HTML 코딩 소스를 보시는 것과 같이 path태그속에서 M10,10에서 시작하여 숫자들이 나열되고 290,290지점으로 끝나게 됩니다. 뭔지는 모르지만 path 태그에서 d속성값을 위 숫자대로 대입하면 결과 이미지 처럼 나오게 됩니다.

정리를 하면,

diagonal = d3.svg.diagonal()
      .source({x:10,y:10})
      .target({x:290,y:290});

위 기준으로 시작하고 path 부분만 만들어 주면 됩니다. 그러면 패치 경로는 아래 HTML문서상의 코딩처럼 나오게 코딩해야 겠죠.

 <path d="M10,10C10,150 290,150 290,290" stroke-width="1.5px" stroke="#0000ff" fill="none"></path></svg>

위 path 경로의 d값만 코딩으로 표현하면 되는데 이 부분을 함수로 만들어 보겠습니다.

3. d3.svg.diagonal() 함수 만들기

---

 <path d="M10,10C10,150 290,150 290,290" stroke-width="1.5px" stroke="#0000ff" fill="none"></path></svg>

위 코딩 부분을 잘 풀어서 정리하면 아래와 같이 코딩 할 수 있습니다.

d =  "M"+source.x+","+ source.y+"C"+source.x+","+(target.y-140)+
    " "+target.x+","+(target.y-140)+ " " +target.x+","+target.y ;

이 부분을 함수로 만들어 정리하면,

function diagonaltest(){
  return "M"+source.x+","+ source.y+"C"+source.x+","+(target.y-140)+
    " "+target.x+","+(target.y-140)+ " " +target.x+","+target.y ;
}

이 코딩은 제 블로그에 예전에 공부할 때 정리한 코딩입니다.

4. d3.svg.diagonal()함수를 diagonaltest()함수로 변경

---

<svg height="300" width="300" style="background: yellow">
</svg>

<script src="https://d3js.org/d3.v5.min.js"></script>

<script>
var source = {x:10,y:10};
var target = {x:290,y:290};
var path = d3.select("svg").append("path")
    .attr("fill","none")
    .attr("stroke","#0000ff")
    .attr("stroke-width","1.5px")
    .attr("d",diagonaltest);

function diagonaltest(){
  return "M"+source.x+","+ source.y+"C"+source.x+","+(target.y-140)+
    " "+target.x+","+(target.y-140)+ " " +target.x+","+target.y ;
}
</script>

[결과]

마무리

---

대충 사라진 함수를 복원한 실험을 하였습니다.사실 예전에 D3.js를 처음 공부 할 때잠깐 실험했네 내용인데 스팀잇 공간에 소개하고 싶어서 post을 올립니다. 사실 사라진 함수는 새로운 함수가 나왔기 때문에 사라졌고 그 새로운 함수를 쓰면 좋지만 d3.js를 공부한다면 이 부분을 직접 복원해 보는 공부도 해보는 것이 좋을 것 같아서 이번 post의 주제로 정했네요.

사실 주말에 다른 일 때문에 post 연재가 막힐 것 같아서 예전에 실험한 내용을 기반으로 다시 정리를 했네요.

오늘 실험한 내용은 우선 과거 버전으로 코딩해서 나온 HTML의 결과 소스를 보고 분석하여 복원 함수를 만들었는데 여러분들도 과거버전 중 사라진 함수가 있다면 그 함수를 이런식으로 HTML 소스를 분석하여 직접 만들어 보셨으면 합니다.