'2018/10/31'에 해당되는 글 3건

  1. 2018.10.31 d3 arc text
  2. 2018.10.31 d3 hyperlink
  3. 2018.10.31 js array keys(),values()
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!');

[링크 : http://bl.ocks.org/jebeck/196406a3486985d2b92e]

[링크 : https://gist.github.com/jebeck/196406a3486985d2b92e]

'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
Posted by 구차니
Programming/d32018. 10. 31. 18:54

d3 에서 svg에 링크를 걸어줄 수 있다.

holder.append("a")
    .attr("xlink:href", "http://en.wikipedia.org/wiki/"+word)

[링크 : http://bl.ocks.org/d3noob/8150631]

'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
Posted by 구차니

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
Posted by 구차니