구차니의 잡동사니 모음

d3에서 update 하는 방법 찾는중..

DOM 객체로 직접 접근해서

data()로 밀어 넣고

enter()로 그리게 하는건가?

[링크 : https://medium.com/@c_behrens/enter-update-exit-6cafc6014c3]

[링크 : https://www.dashingd3js.com/lessons/d3-basic-general-update-pattern]

[링크 : http://bl.ocks.org/d3noob/7030f35b72de721622b8]

당연(?) 하지만 circle의 stroke-width는 안과 밖으로 커진다.

[링크 : http://www.d3noob.org/2014/02/styles-in-d3js.html]

getBBbox() 예제가 더 많긴한데...

어짜피 둘다 이미 그려진 시점에서 크기를 얻어 오는거라..

위치를 세밀하게 설정하기에는 무리가 있으려나?

getComputedTextLength();

[링크 : https://stackoverflow.com/questions/10254644/get-pixel-length-of-string-in-svg]

[링크 : https://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getComputedTextLength]

getBBbox()

[링크 : https://gist.github.com/huytd/327e453c95ca3edadb32d0c867e2561b]

[링크 : https://bl.ocks.org/mbostock/1160929]

[링크 : http://blog.xogus.io/2017/01/15/SVG에서-getBBox-활용하기/]

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement]

//Create an SVG path (based on bl.ocks.org/mbostock/2565344)
svg.append("path")
    .attr("id", "wavy") //Unique id of the path
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30") //SVG path
    .style("fill", "none")
    .style("stroke", "#AAAAAA");

//Create an SVG text element and append a textPath element
svg.append("text")
   .append("textPath") //append a textPath to the text element
    .attr("xlink:href", "#wavy") //place the ID of the path here
    .style("text-anchor","middle") //place the text halfway on the arc
    .attr("startOffset", "50%")
    .text("Yay, my text is on a wavy path");

[링크 : https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html]

[링크 : http://tutorials.jenkov.com/svg/path-element.html]

+2018.11.01

의외로 startOffset이 중요하다!

      svg.append('text')
        .append('textPath')
        .attr({
          startOffset: '50%',
          'xlink:href': '#curvedTextPath'
        })
        .text('Hello, world!');

[링크 : http://bl.ocks.org/jebeck/196406a3486985d2b92e]

[링크 : https://gist.github.com/jebeck/196406a3486985d2b92e]

d3 에서 svg에 링크를 걸어줄 수 있다.

holder.append("a")
    .attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)

[링크 : http://bl.ocks.org/d3noob/8150631]

d3 내에 이미지를 넣어서 사용하는 방법

background 라기 보다는 단일 image 엘리먼트로 추가한다.

[링크 : http://bl.ocks.org/eesur/be2abfb3155a38be4de4]

[링크 : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href]

반복적으로 수행하는것에는..

recursive_transitions가 핵심인가..?

[링크 : https://bl.ocks.org/whitews/3073773f5f1fd58226ee]

어쩌다 받은거라 최신버전이 얼마인지도 모르고 했는데

다시 확인해보니 v3.. ㅠㅠ

현재 최신버전은 v5.7.0

[링크 : https://d3js.org/]

덕분에.. v3.x 에서 v5.x로 마이그레이션 하게 생겼네.. ㅠㅠ

[링크 : https://github.com/d3/d3/releases/v3.0.0]