'Programming > javascript & HTML' 카테고리의 다른 글
| 브라우저 닫기, 창 이동시 이벤트 (0) | 2018.11.30 |
|---|---|
| javascript 변수 정확도 (0) | 2018.11.26 |
| wavesurfer.js 그리고 HE-AACv2 (0) | 2018.11.21 |
| requireJS (0) | 2018.11.21 |
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
| 브라우저 닫기, 창 이동시 이벤트 (0) | 2018.11.30 |
|---|---|
| javascript 변수 정확도 (0) | 2018.11.26 |
| wavesurfer.js 그리고 HE-AACv2 (0) | 2018.11.21 |
| requireJS (0) | 2018.11.21 |
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
[링크 : 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 |
크롬에서는 HE-AACv2를 지원하지 않는건가? edge는 되는데 머야...
Uncaught (in promise) DOMException: Unable to decode audio data
[링크 : https://bugs.chromium.org/p/chromium/issues/detail?id=409402]
[링크 : https://bugs.chromium.org/p/chromium/issues/detail?id=534301]
[링크 : https://github.com/katspaugh/wavesurfer.js/issues/703]
| javascript 변수 정확도 (0) | 2018.11.26 |
|---|---|
| js object array sort by key (0) | 2018.11.21 |
| requireJS (0) | 2018.11.21 |
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
| JSON.stringify() 주의사항(?) (0) | 2018.11.17 |
node.js 예제를 보다 보면
분명히(?) client side인데 require가 있어서 보는 중..
require.js로 JS들을 조건부 load 할 수 있다고 하는데...
[링크 : https://requirejs.org/docs/commonjs.html]
AMD는 Asynchronous Module Definition (비동기 모듈 정의) 규칙이다.
[링크 : https://blog.pigno.se/post/157992405313]
// EITHER - accessing modules with <script> tags var WaveSurfer = window.WaveSurfer; var TimelinePlugin = window.WaveSurfer.timeline; var MinimapPlugin = window.WaveSurfer.minimap; // OR - importing as es6 module import WaveSurfer from 'wavesurfer.js'; import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js'; import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js'; // OR - importing as require.js/commonjs modules var WaveSurfer = require('wavesurfer.js'); var TimelinePlugin = require('wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js'); var MinimapPlugin = require('wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js'); // ... initialising waveform with plugins var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', plugins: [ TimelinePlugin.create({ container: '#wave-timeline' }), MinimapPlugin.create() ] }); |
| js object array sort by key (0) | 2018.11.21 |
|---|---|
| wavesurfer.js 그리고 HE-AACv2 (0) | 2018.11.21 |
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
| JSON.stringify() 주의사항(?) (0) | 2018.11.17 |
| canvas to input type=file formdata (0) | 2018.11.15 |
sqlite3 패키지를 설치한다.
[링크 : https://www.npmjs.com/package/sqlite3]
| node.js xml <-> json (0) | 2018.11.25 |
|---|---|
| node.js mysql blob (0) | 2018.11.23 |
| node.js swagger (0) | 2018.11.12 |
| node.js axios delete에 body 쓰기 (0) | 2018.11.12 |
| mysql jwt plain object payload (0) | 2018.11.09 |
식별자로 바로바로 나온다.
근데.. 먼가 좀 직관적이지 않네?
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 |
걍 경고인가 문제가 있는건가.. 모르겠네
[링크 : https://forum.vuejs.org/t/how-to-debug-chrome-violation-message-handler-took/36928/2]
+
2018.11.19
"Chrome violations" don't represent Chrome bugs or app errors. They are warnings intended to help you improve your script. Here, Chrome is alerting you there's probably an opportunity to speed up your script. ("Violation" is arguably misleading terminology; what it really means is that the script violates a pre-defined guideline. These messages first appeared in Chrome in early 2017 and should ideally have a "More info" prompt to elaborate on the meaning and give suggested actions to the developer. Hopefully those will be added in the future.) |
[링크 : https://stackoverflow.com/.../javascript-chrome-violation-violation-handler-took-83ms-of-runtime]
| wavesurfer.js 그리고 HE-AACv2 (0) | 2018.11.21 |
|---|---|
| requireJS (0) | 2018.11.21 |
| JSON.stringify() 주의사항(?) (0) | 2018.11.17 |
| canvas to input type=file formdata (0) | 2018.11.15 |
| jwt token ajax (2) | 2018.11.08 |
+ 2018.11.19
걍.. stringify 하고 == 이렇게 비교한게 정상적으로 안되고
원래 배열을 == 로 비교하니 잘되는 희한한 문제..
그리고 코드에서 임시 객체는 삽입해 주었는데 그게 어떻게 내가 잘 못 이해해서
삽입전이거나 그렇게 비교해서 내부 객체를 안한걸로 보인거 같기도 한데
코드 변경해버려서 다시 보기도 귀찮...
---
JSON 객체 내부에 array가 있으면 얘는 별도로 stringify 해주지 않는다.
모지?
+
[링크 : https://medium.com/@cheonmyung0217/구현-json-stringify-를-재귀함수로-구현하기-972f08622562]
+
var a = {"a":"a","b":"b"} undefined a {a: "a", b: "b"} JSON.stringify(a) "{"a":"a","b":"b"}" var b = {"a":"a","b":"b","c":{"c":"c"}} undefined JSON.stringify(b) "{"a":"a","b":"b","c":{"c":"c"}}" var c = {"a":a,"b":b} undefined JSON.stringify(c) "{"a":{"a":"a","b":"b"},"b":{"a":"a","b":"b","c":{"c":"c"}}}" |
| requireJS (0) | 2018.11.21 |
|---|---|
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
| canvas to input type=file formdata (0) | 2018.11.15 |
| jwt token ajax (2) | 2018.11.08 |
| js forEach 에서 다음 문장 실행하기 (0) | 2018.11.08 |
전에 하다가 실패했었는데 다시 한번 시도는 해봐야지.. ㅠㅠ
[링크 : https://stackoverflow.com/questions/19032406/convert-html5-canvas-into-file-to-be-uploaded]
[링크 : http://charlie0301.blogspot.com/2014/10/html5-canvas-blob-data-post-upload.html]
[링크 : https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata]
| [Violation] 'setInterval' handler took (0) | 2018.11.18 |
|---|---|
| JSON.stringify() 주의사항(?) (0) | 2018.11.17 |
| jwt token ajax (2) | 2018.11.08 |
| js forEach 에서 다음 문장 실행하기 (0) | 2018.11.08 |
| js str2ip (0) | 2018.11.07 |
출력할 데이터에 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 |