당연(?) 하지만 circle의 stroke-width는 안과 밖으로 커진다.
'Programming > d3' 카테고리의 다른 글
d3 update 두번째 검색내용.. (0) | 2018.11.15 |
---|---|
d3 update enter (0) | 2018.11.12 |
d3 svg string width in px (0) | 2018.11.01 |
d3 arc text (0) | 2018.10.31 |
d3 hyperlink (0) | 2018.10.31 |
당연(?) 하지만 circle의 stroke-width는 안과 밖으로 커진다.
d3 update 두번째 검색내용.. (0) | 2018.11.15 |
---|---|
d3 update enter (0) | 2018.11.12 |
d3 svg string width in px (0) | 2018.11.01 |
d3 arc text (0) | 2018.10.31 |
d3 hyperlink (0) | 2018.10.31 |
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]
d3 update enter (0) | 2018.11.12 |
---|---|
d3 svg circle (0) | 2018.11.01 |
d3 arc text (0) | 2018.10.31 |
d3 hyperlink (0) | 2018.10.31 |
d3 background image (0) | 2018.10.29 |
//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!');
d3 svg circle (0) | 2018.11.01 |
---|---|
d3 svg string width in px (0) | 2018.11.01 |
d3 hyperlink (0) | 2018.10.31 |
d3 background image (0) | 2018.10.29 |
d3 pulse / blink (0) | 2018.10.29 |
d3 에서 svg에 링크를 걸어줄 수 있다.
holder.append("a")
.attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)
d3 svg string width in px (0) | 2018.11.01 |
---|---|
d3 arc text (0) | 2018.10.31 |
d3 background image (0) | 2018.10.29 |
d3 pulse / blink (0) | 2018.10.29 |
d3 v5... -0-? (0) | 2018.10.18 |
associated array 라고 해야하나..
이녀석은 length나 length()로 받아올수 없으니까
반대로 key의 갯수로 길이를 얻는 식의 우회방법을 써야 한다.
var obj = { foo: 'bar', baz: 42 }; console.log(Object.keys(obj)); // ['bar', 42] console.log(Object.values(obj)); // ['bar', 42] |
[링크 : https://4urdev.tistory.com/7]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values]
자바스크립트 절대값 abs() (0) | 2018.11.05 |
---|---|
html canvas 보이는 크기와 실제 크기 다르게 설정하기 (0) | 2018.11.02 |
js eval (0) | 2018.10.30 |
js split \n ' ' (0) | 2018.10.26 |
curl text/plain (0) | 2018.10.26 |
예전에 lisp에서 우오오 했던거 같은 녀석..
eval() 을 통해서 넘겨받은 데이터를 코드로 실행한다.
즉, array 데이터를 plain/text로 받은걸
다시 array로 복구가 가능 하다는 것!
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval]
+
JSON.stringify() 등으로 문자열화 된 객체를 실제 객체로 만드는데 쓰일수도 있다.
html canvas 보이는 크기와 실제 크기 다르게 설정하기 (0) | 2018.11.02 |
---|---|
js array keys(),values() (0) | 2018.10.31 |
js split \n ' ' (0) | 2018.10.26 |
curl text/plain (0) | 2018.10.26 |
js date time to epoch (0) | 2018.10.26 |
d3 내에 이미지를 넣어서 사용하는 방법
background 라기 보다는 단일 image 엘리먼트로 추가한다.
[링크 : http://bl.ocks.org/eesur/be2abfb3155a38be4de4]
[링크 : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href]
d3 arc text (0) | 2018.10.31 |
---|---|
d3 hyperlink (0) | 2018.10.31 |
d3 pulse / blink (0) | 2018.10.29 |
d3 v5... -0-? (0) | 2018.10.18 |
d3 v3 doc (0) | 2018.10.17 |
반복적으로 수행하는것에는..
recursive_transitions가 핵심인가..?
selection.transition() .duration(400) .attr("stroke-width", 2) .attr("r", 8) .ease('sin-in') .transition() .duration(800) .attr('stroke-width', 3) .attr("r", 12) .ease('bounce-in') .each("end", recursive_transitions); |
d3 hyperlink (0) | 2018.10.31 |
---|---|
d3 background image (0) | 2018.10.29 |
d3 v5... -0-? (0) | 2018.10.18 |
d3 v3 doc (0) | 2018.10.17 |
d3 arc 직접 그리기 (0) | 2018.10.17 |
JWT 사용시 cURL을 통해서 해당 JWT 인증 정보를 받는법 찾는중
GET /resource HTTP/1.1 Host: server.example.com Authorization: Bearer eyJhbGciOiJIUzI1NiIXVCJ9...TJVA95OrM7E20RMHrHDcEfxjoYZgeFONFh7HgQ |
[링크 : https://stackoverflow.com/questions/33265812/best-http-authorization-header-type-for-jwt]
TOKEN=$(curl -s -X POST -H 'Accept: application/json' -H 'Content-Type: application/json' --data '{"username":"{username}","password":"{password}","rememberMe":false}' https://{hostname}/api/authenticate | jq -r '.id_token') curl -H 'Accept: application/json' -H "Authorization: Bearer ${TOKEN}" https://{hostname}/api/myresource |
[링크 : https://medium.com/@nieldw/using-curl-to-authenticate-with-jwt-bearer-tokens-55b7fac506bd]
조금 헷갈리는데.. 인증 값으로 이전에 돌려받은 id_token을 쓰면 된다는건가?(bearer로 받아오는)
axios 여러개의 요청을 묶어서 하기 (0) | 2018.11.07 |
---|---|
node.js REST get/post 관련 (0) | 2018.11.06 |
node-rtsp-stream 과 node-rtsp-stream-es6 차이 (0) | 2018.10.24 |
node.js undefined 확인하기 (0) | 2018.10.22 |
node.js를 이용한 자기 자신의 ip 얻기 (4) | 2018.10.22 |
안되진않네
data.split('\n')[0].split(' ');
js array keys(),values() (0) | 2018.10.31 |
---|---|
js eval (0) | 2018.10.30 |
curl text/plain (0) | 2018.10.26 |
js date time to epoch (0) | 2018.10.26 |
canvas to blob (2) | 2018.10.25 |