당연(?) 하지만 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 |
'잡동사니'에 해당되는 글 14036건
- 2018.11.01 d3 svg circle
- 2018.11.01 d3 svg string width in px
- 2018.10.31 d3 arc text
- 2018.10.31 d3 hyperlink
- 2018.10.31 js array keys(),values()
- 2018.10.30 nginx reverse proxy 2
- 2018.10.30 js eval
- 2018.10.29 d3 background image
- 2018.10.29 d3 pulse / blink
- 2018.10.29 네이버 지도 위도/경도 좌표
Programming/d32018. 11. 1. 17:40
Programming/d32018. 11. 1. 07:40
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]
'Programming > d3' 카테고리의 다른 글
| 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 |
Programming/d32018. 10. 31. 18:56
//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!');'Programming > d3' 카테고리의 다른 글
| 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 |
Programming/d32018. 10. 31. 18:54
d3 에서 svg에 링크를 걸어줄 수 있다.
holder.append("a")
.attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)'Programming > d3' 카테고리의 다른 글
| 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 |
Programming/javascript & HTML2018. 10. 31. 15:47
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]
'Programming > javascript & HTML' 카테고리의 다른 글
| 자바스크립트 절대값 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 |
프로그램 사용/nginx2018. 10. 30. 18:51
nginx를 이용해서 http proxy로 사용하는 방법
다른서버 있어서 80은 못쓰고
81번으로 셋팅했고
/test1/ 은 nginx 서버와 동일한 ip의 3001번 포트로 포워딩
/test2/ 는 nginx 서버와 동일한 ip의 3002번 포트로 포워딩 해서 작동한다.
단, node.js나 angular의 경우 상대경로와 절대경로를 조심해서 작성해야 정상적으로 작동하게 된다.
(angular는 안써서 모르겠지만 deploy 시 경로를 잘 지정해야 할지도?)
[링크 : https://itnext.io/angular-cli-proxy-configuration-4311acec9d6f]
의외로 끝에 오는 / 의 역활이 지대하다
server { listen 81 default_server; listen [::]:81 default_server; server_name _; root /usr/share/nginx/html; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } location /test1/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://localhost:3001/; } location /test2/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; Host proxy_set_header $ HTTP_HOST; proxy_pass http://localhost:3002/; } }
|
[링크 : http://www.codingpedia.org/...-in-production-to-serve-angular-app-and-reverse-proxy-nodejs]
[링크 : https://www.joinc.co.kr/w/man/12/proxy]
[링크 : https://gist.github.com/soheilhy/8b94347ff8336d971ad0]
'프로그램 사용 > nginx' 카테고리의 다른 글
| nginx 리버스 프록시 와 ckeidtor upload 413 에러 (0) | 2019.04.03 |
|---|---|
| nginx 502 bad gateway와 audit (0) | 2019.03.20 |
| nginx rever proxy with virtual host(+ subdomain) (0) | 2019.03.07 |
| nginx load balance (0) | 2019.03.05 |
| nginx fastcgi 캐싱 (0) | 2015.09.10 |
Programming/javascript & HTML2018. 10. 30. 18:23
예전에 lisp에서 우오오 했던거 같은 녀석..
eval() 을 통해서 넘겨받은 데이터를 코드로 실행한다.
즉, array 데이터를 plain/text로 받은걸
다시 array로 복구가 가능 하다는 것!
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval]
+
JSON.stringify() 등으로 문자열화 된 객체를 실제 객체로 만드는데 쓰일수도 있다.
'Programming > javascript & HTML' 카테고리의 다른 글
| 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 |
Programming/d32018. 10. 29. 19:20
d3 내에 이미지를 넣어서 사용하는 방법
background 라기 보다는 단일 image 엘리먼트로 추가한다.
[링크 : http://bl.ocks.org/eesur/be2abfb3155a38be4de4]
[링크 : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href]
'Programming > d3' 카테고리의 다른 글
| 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 |
Programming/d32018. 10. 29. 19:16
반복적으로 수행하는것에는..
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); |
'Programming > d3' 카테고리의 다른 글
| 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 |
프로그램 사용/네이버 맵 API2018. 10. 29. 14:00
+
2018.12.12
유입경로가 많아서 수정
latitude가 위도, longitude가 경도
위도 33도~38도 (북한 포함하면 43도 정도, 38선은 가로로 그인 선이니까 위도로 외우면 쉬움)
경도 126~131도
값을 지님
new naver.maps.LatLng(lat,lng) 함수는 위도 먼저, 경도 먼저인데
new naver.maps.LatLng(lat, lng)Parameters
|
DB쪽의 실수인지 간혹 반대로 들어있는 경우도 존재한다.
귀찮으면(?)
function latlng_corrector(lat, lng) { if (33.0 <= lat && lat <= 43.0 && (124.0 <= lng && lng <= 132.0)) return { lat: lat, lng: lng }; else if (124.0 <= lat && lat <= 132.0 && (33.0 <= lng && lng <= 43.0)) { console.log("latitude/longitude swapped!!"); return { lat: lng, lng: lat }; } else return { lat: lat, lng: lng }; } |
이런거 하나 넣고 대충 위도 경도 정보가 뒤바뀌었을 경우 자동으로 뒤집어 주는 것도 방법 일 듯?
+
2018.12.13
아래 예제에서 클릭해서 마커 지정하고
개발자 도구에서 marker.getPosition() 해주면 위치 값이 똭~ 나온다.
이 키워드로 검색하는 분들 목적은.. 위도경도 정보 뽑아 내는거라면 그게 더 나을지도?
[링크 : https://navermaps.github.io/maps.js/docs/tutorial-9-marker-position.example.html]
---
아무생각 없이(!) path에 좌표를 아래와 같이 LatLang([pos1, pos2]) 식으로 했더니
배열이 정렬되어 버리는지 작은 수랑 큰수랑 순서가 엉뚱하게 작동을 한다.
new naver.maps.Polyline({
path: [
new naver.maps.LatLng([
marker_db[data[idx].cid].lng,
marker_db[data[idx].cid].lat
]),
new naver.maps.LatLng([
marker_db[data[idx + 1].cid].lng,
marker_db[data[idx + 1].cid].lat
])
],
map: map,
endIcon: naver.maps.PointingIcon.OPEN_ARROW,
strokeColor: "#cc0000",
strokeWeight: 6
});
반드시(?) []를 빼고 아래와 같이 써야 하는건가...
근데 배열이랑 숫자랑 먼가 다른건가.. 삽입(?)하는 순서에 영향을 받네?
new naver.maps.Polyline({
path: [
new naver.maps.LatLng(
marker_db[data[idx].cid].lat,
marker_db[data[idx].cid].lng
),
new naver.maps.LatLng(
marker_db[data[idx + 1].cid].lat,
marker_db[data[idx + 1].cid].lng
)
],
map: map,
endIcon: naver.maps.PointingIcon.OPEN_ARROW,
strokeColor: "#cc0000",
strokeWeight: 6
});
[링크 : https://navermaps.github.io/maps.js/docs/naver.maps.LatLng.html
+
걍 고민을 해보니.. 변수 하나에 null값이 들어 갔을 뿐
lat lng의 순서 문제라던가 array의 문제라고 보긴 힘들지도...?
'프로그램 사용 > 네이버 맵 API' 카테고리의 다른 글
| ncloud 가입 그리고 지도 API v3 (0) | 2018.11.22 |
|---|---|
| 네이버 지도 API - polyline 삭제하기 (0) | 2018.11.21 |
| 네이버 API 공지 (2) | 2018.10.13 |
| 네이버 지도 - 클릭시 마커 아이콘 변경하기 (0) | 2018.10.10 |
| 네이버 지도 zIndex 와 title (0) | 2018.10.10 |
