'Programming/javascript & HTML'에 해당되는 글 138건

  1. 2018.09.21 svg.js
  2. 2018.09.20 ajax
  3. 2018.09.20 polar clock
  4. 2018.09.18 visjs
  5. 2018.09.18 자바스크립트 ES6 와 화살표 펑션 (=>) 2
  6. 2018.09.18 그래프
  7. 2018.09.17 jquery datatables
  8. 2018.09.17 select - option 투명 배경
  9. 2018.09.17 jquery 테이블 행 추가 / 삭제
  10. 2018.09.14 자바스크립트 배열 관련
Programming/javascript & HTML2018. 9. 21. 18:07

svg.js

d3 에서 svg로 그리길래 찾아보니 역시나(?)

svg를 그리는데 도움을 주는 자바스크립트 라이브러리가 존재한다.


[링크 : http://svgjs.com]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

jquery n번째 요소 선택하기, select 선택하기  (0) 2018.09.27
css 배경 이미지 회전, 크기 등  (0) 2018.09.27
ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
Posted by 구차니
Programming/javascript & HTML2018. 9. 20. 18:04

ajax

error / success / complete 세가지에 대해서 처리해주는 것이 좋다.

(귀찮아서 success만 했는데..)


[링크 : http://shovelman.tistory.com/829]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

css 배경 이미지 회전, 크기 등  (0) 2018.09.27
svg.js  (0) 2018.09.21
polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
Posted by 구차니
Programming/javascript & HTML2018. 9. 20. 13:52

polar clock

그래프 만져보는데 나쁘지 않은 듯?

[링크 : http://bl.ocks.org/mbostock/1096355]


원래 공개된 소스에서는 d3.js가 경로가 잘못되었고

하나만 띄울수 있어서 함수로 변형하니 div 여러개에 각각 띄울수 있게 된다.

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>

function clock_instance(element_id)

{

var width = 300,

    height = 300,

    radius = Math.min(width, height) / 1.9,

    spacing = .09;


var formatSecond = d3.time.format("%-S seconds"),

    formatMinute = d3.time.format("%-M minutes"),

    formatHour = d3.time.format("%-H hours"),

    formatDay = d3.time.format("%A"),

    formatDate = function(d) { d = d.getDate(); switch (10 <= d && d <= 19 ? 10 : d % 10) { case 1: d += "st"; break; case 2: d += "nd"; break; case 3: d += "rd"; break; default: d += "th"; break; } return d; },

    formatMonth = d3.time.format("%B");


var color = d3.scale.linear()

    .range(["hsl(-180,60%,50%)", "hsl(180,60%,50%)"])

    .interpolate(function(a, b) { var i = d3.interpolateString(a, b); return function(t) { return d3.hsl(i(t)); }; });


var arcBody = d3.svg.arc()

    .startAngle(0)

    .endAngle(function(d) { return d.value * 2 * Math.PI; })

    .innerRadius(function(d) { return d.index * radius; })

    .outerRadius(function(d) { return (d.index + spacing) * radius; })

    .cornerRadius(6);


var arcCenter = d3.svg.arc()

    .startAngle(0)

    .endAngle(function(d) { return d.value * 2 * Math.PI; })

    .innerRadius(function(d) { return (d.index + spacing / 2) * radius; })

    .outerRadius(function(d) { return (d.index + spacing / 2) * radius; });


var svg = d3.select(element_id).append("svg")

    .attr("width", width)

    .attr("height", height)

  .append("g")

    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var field = svg.selectAll("g")

    .data(fields)

  .enter().append("g");


field.append("path")

    .attr("class", "arc-body");


field.append("path")

    .attr("id", function(d, i) { return "arc-center-" + i; })

    .attr("class", "arc-center");


field.append("text")

    .attr("dy", ".35em")

    .attr("dx", ".75em")

    .style("text-anchor", "start")

  .append("textPath")

    .attr("startOffset", "50%")

    .attr("class", "arc-text")

    .attr("xlink:href", function(d, i) { return "#arc-center-" + i; });


tick();


d3.select(self.frameElement).style("height", height + "px");


function tick() {

  if (!document.hidden) field

      .each(function(d) { this._value = d.value; })

      .data(fields)

      .each(function(d) { d.previousValue = this._value; })

    .transition()

      .ease("elastic")

      .duration(500)

      .each(fieldTransition);


  setTimeout(tick, 1000 - Date.now() % 1000);

}


function fieldTransition() {

  var field = d3.select(this).transition();


  field.select(".arc-body")

      .attrTween("d", arcTween(arcBody))

      .style("fill", function(d) { return color(d.value); });


  field.select(".arc-center")

      .attrTween("d", arcTween(arcCenter));


  field.select(".arc-text")

      .text(function(d) { return d.text; });

}


function arcTween(arc) {

  return function(d) {

    var i = d3.interpolateNumber(d.previousValue, d.value);

    return function(t) {

      d.value = i(t);

      return arc(d);

    };

  };

}


function fields() {

  var now = new Date;

  return [

    {index: .7, text: formatSecond(now), value: now.getSeconds() / 60},

    {index: .6, text: formatMinute(now), value: now.getMinutes() / 60},

    {index: .5, text: formatHour(now),   value: now.getHours() / 24},

    {index: .3, text: formatDay(now),    value: now.getDay() / 7},

    {index: .2, text: formatDate(now),   value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

    {index: .1, text: formatMonth(now),  value: now.getMonth() / 12}

  ];

}

}

</script>

<body>

<div id="credit">Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.</div>

<div>

<div id='id-1' style="float:left"/>

<div id='id-2' style="float:left"/>

<div>

</body>

<script>

 clock_instance("#id-1");

 clock_instance("#id-2");

</script> 

[링크 : https://stackoverflow.com/.../d3-selectelement-not-working-when-code-above-the-html-element]



1. 색상은 hsl 색상으로 칠해짐. 

2. 값의 범위와 값이 같으면 동일한 색

3. 가장 적은 값은 앞의 범위로 부터 시작함,  아래와 같이 설정되면 빨간색에서 cyan 까지 칠해짐

    .range(["hsl(0,60%,50%)", "hsl(180,60%,50%)"]) 

4. 값의 범위는 소수로 한정됨(즉, 0~1 사이의 실수로 정규화 됨)

function fields() {

  var now = new Date;

  return [

    {index: .6, text: formatSecond(now), value: now.getSeconds() / 60},

    {index: .5, text: formatMinute(now), value: now.getMinutes() / 60},

    {index: .4, text: formatHour(now),   value: now.getHours() / 24},

    {index: .3, text: formatDay(now),    value: now.getDay() / 7},

    {index: .2, text: formatDate(now),   value: (now.getDate() - 1) / (32 - new Date(now.getYear(), now.getMonth(), 32).getDate())},

    {index: .1, text: formatMonth(now),  value: now.getMonth() / 12}

  ];

} 


저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

svg.js  (0) 2018.09.21
ajax  (0) 2018.09.20
visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
Posted by 구차니
Programming/javascript & HTML2018. 9. 18. 19:41

visjs

visualization 라이브러리

네트워크라던가 그래프라던가 여러가지 그림을 그릴수 있게 해주는 라이브러리


[링크 : http://visjs.org]

[링크 : http://visjs.org/network_examples.html]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

ajax  (0) 2018.09.20
polar clock  (0) 2018.09.20
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
Posted by 구차니
Programming/javascript & HTML2018. 9. 18. 19:28

자바스크립트 ES6 와 화살표 펑션 (=>)

보다보니 먼가 해서 찾아보는데

ES6에서 추가된 문법으로 function을 제외하고

이름없는 함수로 만들어주는 축약자(?)라고 한다.


[링크 : http://blog.jeonghwan.net/2016/04/28/es6.html]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

polar clock  (0) 2018.09.20
visjs  (0) 2018.09.18
그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
Posted by 구차니
Programming/javascript & HTML2018. 9. 18. 15:25

그래프


[링크 : http://bl.ocks.org/mbostock/1096355]

[링크 : http://pablomolnar.github.io/radial-progress-chart/] << 애플시계 느낌

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

[링크 : https://github.com/pablomolnar/radial-progress-chart]

[링크 : https://github.com/lionheart/ConcentricProgressRingView] 애플시계/iOS

[링크 : https://codepen.io/jonwinton/pen/KwwVMd] 몬떙겼음

[링크 : https://github.com/moarwick/react-mt-svg-lines] 마음에 드는데 커스터마이징 찾아야함

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

visjs  (0) 2018.09.18
자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
Posted by 구차니
Programming/javascript & HTML2018. 9. 17. 16:11

jquery datatables

제목 정렬 하는 등의 기능을 제공하는 자바 스크립트


jquery.dataTables.min.css

[링크 : https://datatables.net/]


+

사용법 보다 보니. npm 에서 무언가 깔아야 하는것 같네?

단독으로 하는건 아닐지도..

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

자바스크립트 ES6 와 화살표 펑션 (=>)  (2) 2018.09.18
그래프  (0) 2018.09.18
select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
Posted by 구차니
Programming/javascript & HTML2018. 9. 17. 15:36

select - option 투명 배경

transparent가 적용 안되니

rgba 값으로 투명하게 지정


[링크 : https://stackoverflow.com/questions/23719520/css-for-select-option-to-be-transparent-background]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

그래프  (0) 2018.09.18
jquery datatables  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
rest api ajax / jquery with HTTP header  (0) 2018.09.12
Posted by 구차니
Programming/javascript & HTML2018. 9. 17. 09:10

jquery 테이블 행 추가 / 삭제

가장 아래 행 추가 및 삭제

[링크 : https://zetawiki.com/wiki/JQuery_테이블_행_추가/삭제]


이건 체크된 항목이 있는 행만 삭제

[링크 : https://stackoverflow.com/questions/21508134/how-to-remove-checked-table-row-using-jquery]


체크박스 체크 못하도록 막기(disabled)

[링크 : https://okky.kr/article/101777]


선택된 텍스트 박스(input type="text")에 대해서만 색상 변경

[링크 : https://stackoverflow.com/questions/21873591/set-background-color-of-text-field-onfocus]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

jquery datatables  (0) 2018.09.17
select - option 투명 배경  (0) 2018.09.17
자바스크립트 배열 관련  (0) 2018.09.14
rest api ajax / jquery with HTTP header  (0) 2018.09.12
자바 스크립트 변수  (0) 2018.09.12
Posted by 구차니
Programming/javascript & HTML2018. 9. 14. 18:56

자바스크립트 배열 관련

자바스크립트에서 배열에 추가하는 건 push로 한다고


[링크 : https://www.w3schools.com/js/js_arrays.asp]

저작자표시

'Programming > javascript & HTML' 카테고리의 다른 글

select - option 투명 배경  (0) 2018.09.17
jquery 테이블 행 추가 / 삭제  (0) 2018.09.17
rest api ajax / jquery with HTTP header  (0) 2018.09.12
자바 스크립트 변수  (0) 2018.09.12
JSMpeg timestamp  (0) 2018.09.11
Posted by 구차니

티스토리툴바