시간 축 관련해서 헤메고 있는데..
어쩌다 보니 링크가 날아가서.. (-_-)
아무튼 요약하자면
new Date()를 통해 받은 값이라도 domain()에 쓰려면 new Date()를 날짜 객체로 바꾸어 주어야 한다는 것 정도?
| d3 mouseover (0) | 2018.12.23 |
|---|---|
| d3 time domain (0) | 2018.12.21 |
| d3 double line graph (0) | 2018.12.21 |
| d3 axis (0) | 2018.11.27 |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
mouseover는 d3 라기 보다는 그냥 순수(?)한 mouseover 이벤트로 구현하는 듯
svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr(circleAttrs) // Get attributes from circleAttrs var .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); |
[링크 : http://bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774]
| d3 axis / time domain (0) | 2018.12.26 |
|---|---|
| d3 time domain (0) | 2018.12.21 |
| d3 double line graph (0) | 2018.12.21 |
| d3 axis (0) | 2018.11.27 |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
희한하리 만치 시간축에 대해서 년/월/일 시:분:초 까지 출력을 하기 힘드네?
가장 바라는건 일 단위는 전부 출력하고 그 외에는 시분초만 출력하는건데 가능하려나?
[링크 : http://bl.ocks.org/ssmaroju/8af70edf235c6fcfe01bd7c1a4f95b96]
[링크 : https://stackoverflow.com/questions/33388547/time-axis-in-d3-js-with-specific-time-zone]
[링크 : http://www.d3noob.org/2012/12/formatting-date-time-on-d3js-graph.html]
| d3 axis / time domain (0) | 2018.12.26 |
|---|---|
| d3 mouseover (0) | 2018.12.23 |
| d3 double line graph (0) | 2018.12.21 |
| d3 axis (0) | 2018.11.27 |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
d3.v4 기준
두개의 값을 출력하는 녀석(2계열)
[링크 : https://bl.ocks.org/brianbancroft/d4e65c54a1e7f16d5187ea03820e7c36]
| d3 mouseover (0) | 2018.12.23 |
|---|---|
| d3 time domain (0) | 2018.12.21 |
| d3 axis (0) | 2018.11.27 |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
| d3 multi line graph (0) | 2018.11.21 |
d3.time.scale.utc() // 시간
d3.time.scale() // 월&일
[링크 : http://bl.ocks.org/jebeck/9671241]
domain
[링크 : https://stackoverflow.com/questions/11807574/d3-using-strings-as-axis-ticks]
[링크 : https://bl.ocks.org/mbostock/3259783]
d3.extent
| d3 time domain (0) | 2018.12.21 |
|---|---|
| d3 double line graph (0) | 2018.12.21 |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
| d3 multi line graph (0) | 2018.11.21 |
| d3.time.format (0) | 2018.11.21 |
서로 다른 계열의 데이터를 출력하는 방법을 찾는 중..
[링크 : https://github.com/LonnyGomes/attic-temperature-graph]
+
2018.12.21
[링크 : http://blog.fraggod.net/2016/08/05/d3-chart-for-common-temperaturerh-time-series-data.html[
| d3 double line graph (0) | 2018.12.21 |
|---|---|
| d3 axis (0) | 2018.11.27 |
| d3 multi line graph (0) | 2018.11.21 |
| d3.time.format (0) | 2018.11.21 |
| d3 pie 칸색 바꾸기 (0) | 2018.11.15 |
[링크 : https://beta.observablehq.com/@mbostock/d3-multi-line-chart]
d3.v4
d3.line
[링크 : https://bl.ocks.org/d3noob/4db972df5d7efc7d611255d1cc6f3c4f]
[링크 : https://codepen.io/zakariachowdhury/pen/JEmjwq]
d3 3.5.3
[링크 : https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91]
+ 2018.11.22
[링크 : http://bl.ocks.org/hunzy/11110940] grid
| d3 axis (0) | 2018.11.27 |
|---|---|
| d3 온도/습도 그래프 (0) | 2018.11.26 |
| d3.time.format (0) | 2018.11.21 |
| d3 pie 칸색 바꾸기 (0) | 2018.11.15 |
| d3 update 두번째 검색내용.. (0) | 2018.11.15 |
식별자로 바로바로 나온다.
근데.. 먼가 좀 직관적이지 않네?
var formatMillisecond = d3.timeFormat(".%L"), formatSecond = d3.timeFormat(":%S"), formatMinute = d3.timeFormat("%I:%M"), formatHour = d3.timeFormat("%I %p"), formatDay = d3.timeFormat("%a %d"), formatWeek = d3.timeFormat("%b %d"), formatMonth = d3.timeFormat("%B"), formatYear = d3.timeFormat("%Y"); |
| d3 온도/습도 그래프 (0) | 2018.11.26 |
|---|---|
| d3 multi line graph (0) | 2018.11.21 |
| d3 pie 칸색 바꾸기 (0) | 2018.11.15 |
| d3 update 두번째 검색내용.. (0) | 2018.11.15 |
| d3 update enter (0) | 2018.11.12 |
출력할 데이터에 label, value 외에 color를 이용하여 해당 칸을 직접 색 지정이 가능한 라이브러리
흐음.. 이걸 원한건 아닌데 ㅠㅠ
data: { content: [ { label: "Bushtit", value: 5 }, { label: "Chickadee", value: 2 }, { label: "Elephants", value: 6, color: "#00aa00" }, // here! ]} |
[링크 : http://d3pie.org/website/examples/colors.html]
[링크 : http://d3pie.org/]
+
좀 다르면서도 위와 같은 접근 방법
직접 fill color를 지정해주도록 .data(pie()) 이후에 추가해주면 되는 듯 하다.
var path = svg.selectAll('path') .data(pie(data)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return data[i].color; }); [ { "count": 10,"color":"rgb(0,154,205)" }, { "count": 20 ,"color":"rgb(139,119,101)"}, { "count": 30,"color":"rgb(255,140,0)" }, { "count": 40,"color":"rgb(127,255,0)" } ] |
[링크 : https://www.knowlarity.com/blog/creating-pie-chart-d3-js-step-step/]
| d3 multi line graph (0) | 2018.11.21 |
|---|---|
| d3.time.format (0) | 2018.11.21 |
| d3 update 두번째 검색내용.. (0) | 2018.11.15 |
| d3 update enter (0) | 2018.11.12 |
| d3 svg circle (0) | 2018.11.01 |
update라는 함수가 존재하는 것은 아니고
data() 함수를 통해 값을 묶어주고(bind)
enter()로 새로운 항목을 추가하고
exit()로 나가면서 삭제하거나 어떠한 다른 행위를 하면서 (예, exit().remove() )
업데이트 하는 action을 구현한다 라는 개념..
[링크 : https://bl.ocks.org/mbostock/3808218]
[링크 : https://lumiamitie.github.io/d3/d3-enter-update-exit/]
[링크 : https://blog.nacyot.com/articles/2015-02-02-d3-selection/]
| d3.time.format (0) | 2018.11.21 |
|---|---|
| d3 pie 칸색 바꾸기 (0) | 2018.11.15 |
| d3 update enter (0) | 2018.11.12 |
| d3 svg circle (0) | 2018.11.01 |
| d3 svg string width in px (0) | 2018.11.01 |
|
