d3.js
D3.js 시각화에 사용되는 핵심 SVG 개념

좌표계

정상적인 수학 좌표계에서 점 x = 0, y = 0은 그래프의 왼쪽 아래 모서리에 있습니다. 그러나 SVG 좌표계에서이 (0,0) 점은 '캔버스'의 왼쪽 상단에 있으며 절대 / 수정 위치를 지정하고 위쪽과 왼쪽을 사용하여 CSS를 제어 할 때 CSS와 비슷한 종류입니다. 요소의 정확한 점.

SVG에서 y가 증가하면 모양이 아래로 이동한다는 것을 명심해야합니다.

ax 값과 y 값에 해당하는 각 점으로 산점도를 생성한다고 가정 해 봅시다. 값의 크기를 조정하려면 다음과 같이 도메인과 범위를 설정해야합니다.

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

그러나이 설정을 그대로 유지하면 포인트는 예상 한 것과 같이 하단 수평선 대신 상단 수평 가장자리를 기준으로합니다.

d3에 대한 좋은 점은 도메인 설정에서 간단한 조정을 통해 쉽게 변경할 수 있다는 것입니다.

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

위의 코드에서 도메인의 영점은 시청자의 눈에있는 차트의 하단 라인 인 SVG의 높이에 해당하는 반면 소스 데이터의 최대 값은 SVG의 영점에 해당합니다 좌표계는 시청자가 얻을 수있는 최대 값입니다.

그만큼 요소

<rect> 는 직사각형을 나타내며, 획 및 채우기와 같은 미적 속성을 제외하고 직사각형은 위치와 크기로 정의됩니다.

위치는 x 및 y 속성에 의해 결정됩니다. 위치는 사각형의 부모를 기준으로합니다. x 또는 y 속성을 지정하지 않으면 기본값은 부모 요소를 기준으로 0입니다.

위치를 지정하거나 직사각형의 '시작점'을 지정한 다음에는 크기를 지정해야합니다. 실제로 캔버스에 sth를 그려야 할 경우 필수적입니다. 그렇지 않은 경우 크기 속성을 지정하거나 값을 0으로 설정하면 캔버스에 아무 것도 표시되지 않습니다.

사례 : 막 대형 차트

첫 번째 시나리오 인 y 축을 계속 진행하지만 이번에는 막 대형 차트를 그려 보겠습니다.

y 축척 설정이 동일하다고 가정하면 y 축은 올바르게 설정되지만 산점도와이 막대 차트 간의 유일한 차이는 너비와 높이, 특히 높이를 지정해야한다는 것입니다. 더 구체적으로, 우리는 이미 '출발점'을 얻었고, 나머지는 높이와 같은 것들을 사용하는 것입니다 :

.attr("height", function(d){
  return (height - yScale(d.value))
})

그만큼

<svg> 요소는 루트 요소이거나 우리가 차트를 그리는 캔버스입니다.

SVG 요소는 서로 내부에 중첩 될 수 있으며, 이렇게하면 SVG 도형을 함께 그룹화 할 수 있습니다. 반면에 요소 내에 중첩 된 모든 도형은 해당 요소를 기준으로 배치됩니다.

한 가지 언급이 필요할 수 있습니다. 우리는 다른 내부에 중첩 될 수 없으며 작동하지 않습니다.

사례 : 여러 차트

예를 들어, 이 다중 도넛 형 차트는 각각 도넛 형 차트가 들어있는 여러 요소로 구성됩니다. 이것은 요소를 사용하여 달성 할 수 있지만,이 경우에는 도넛 형 차트를 하나씩 차례대로 배열하는 것이 더 편리합니다.

우리가 변형 속성을 사용할 수는 없지만 위치에 x, y를 사용할 수 있다는 점을 명심해야합니다.

그만큼 요소

SVG는 현재 자동 줄 바꿈 또는 줄 바꿈을 지원하지 않습니다. 즉, 언제 구출 할 수 있습니다. 요소는 이전 텍스트 행과 관련하여 텍스트의 새 줄을 배치합니다. 그리고이 각각의 범위 내에서 dx 또는 dy를 사용함으로써, 우리는 그 단어를 그 단어 앞에 위치시킬 수 있습니다.

사례 : 축에 주석 달기

예를 들어, y 축에 주석을 추가하고자 할 때 :

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Temperature (ºF)");

SVG 요소를 올바르게 추가

이는 비교적 일반적인 실수입니다. 예를 들어 막 대형 차트에서 rect 요소를 만들고 텍스트 레이블을 추가하려고합니다 (즉, 해당 막대의 값). 따라서 rect 를 추가하고 x 및 y 위치를 정의하는 데 사용한 변수와 동일한 변수를 사용하여 text 요소를 추가합니다. 매우 논리, 당신은 생각할 수 있습니다. 그러나 이것은 효과가 없을 것입니다.

이 실수는 어떻게 발생합니까?

구체적인 예제를 보자. 여기 에는 막대 차트를 만들기위한 아주 기본적인 코드가있다.

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

이것이 우리에게이 결과를 준다.

그러나 텍스트 요소를 추가하려고합니다. 아마도 각 막대에 간단한 값을 넣을 수 있습니다. 그래서, 당신은 이렇게 :

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

그리고, voilà : 아무 일도 일어나지 않습니다! 당신이 그것을 의심한다면 여기에 바이올린이 있습니다.

"그러나 나는 그 꼬리표를보고있다!"

이 마지막 코드로 작성된 SVG를 검사하면 다음과 같이 표시됩니다.

그리고이 시점에서 많은 사람들이 말합니다 : "그러나 나는 텍스트 태그를 보았습니다. 추가되었습니다!" 예, 그렇습니다. 그러나 이것이 작동한다는 것을 의미하지는 않습니다. 아무것도 추가 할 수 있습니다! 예를 들면 다음과 같습니다.

svg.append("crazyTag");

그것은 당신에게이 결과를 줄 것이다 :

<svg>
    <crazyTag></crazyTag>
</svg>

하지만 그 태그가 있기 때문에 어떤 결과도 기대하지 않는군요, 그렇죠?

SVG 요소를 올바른 방법으로 추가

SVG 요소가 어린이를 수용 할 수있는 것을 배우고 사양을 읽습니다. 마지막 예제에서 rect 요소는 text 요소를 포함 할 수 없으므로 코드가 작동하지 않습니다. 그렇다면 텍스트를 표시하는 방법은 무엇입니까?

다른 변수를 만들고 SVG에 text 를 추가하십시오.

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

그리고 이것은 결과입니다.

여기에 바이올린이 있습니다.

SVG : 그리기 순서

이것은 좌절 할 수 있습니다. D3.js를 사용하여 시각화를 만들지 만 상단에 원하는 사각형이 다른 사각형 뒤에 숨겨져 있거나 일부 원형 뒤에있는 선이 실제로는 위에 있습니다. CSS에서 Z- 인덱스 를 사용하여이 문제를 해결하려고 시도하지만 SVG 1.1에서는 작동하지 않습니다.

설명은 간단합니다. SVG에서 요소의 순서는 "페인팅"의 순서를 정의하고 페인팅 순서는 누가 맨 위를 차지하는 지 정의합니다.

SVG 문서 조각의 요소에는 암시 적 그리기 순서가 있으며 SVG 문서 조각의 첫 번째 요소는 먼저 "페인트"됩니다. 후속 요소는 이전에 그린 요소 위에 페인트됩니다.

그래서, 우리는이 SVG를 가지고 있다고 가정합니다 :

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

그는 네 개의 동그라미를 가지고있다. 파란색 동그라미가 첫 번째로 "칠해진"것이므로 다른 모든 문자보다 우울합니다. 그런 다음 우리는 노란색 하나, 그리고 빨간색 하나, 그리고 마지막으로 녹색 하나를가집니다. 초록색이 마지막 것입니다, 그리고 그것은 맨 위에있을 것입니다.

이것은 다음과 같습니다.

D3를 사용하여 SVG 요소의 순서 변경하기

그렇다면 요소의 순서를 변경할 수 있습니까? 녹색 원 앞에 빨간색 원을 만들 수 있습니까?

예. 먼저 염두에 두어야 할 첫 번째 접근법은 코드의 줄 순서입니다. 먼저 배경 요소를 그리고 코드의 뒷부분에는 전경 요소를 그립니다.

그러나 요소를 칠한 후에도 요소의 순서를 동적으로 변경할 수 있습니다. 이것을하기 위해 작성할 수있는 몇 가지 일반 JavaScript 함수가 있지만 D3에는 이미 selection.raise() 및 selection.lower() 두 가지 멋진 기능이 있습니다.

API에 따르면 :

selection.raise () : 선택한 각 요소를 상위 요소의 마지막 하위 요소로 순서대로 다시 삽입합니다. selection.lower () : 선택한 각 요소를 부모의 첫 번째 자식으로 순서대로 다시 삽입합니다.

따라서 이전 SVG에서 요소의 순서를 조작하는 방법을 보여주기 위해 여기에 아주 작은 코드가 있습니다.

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

그것은 무엇을합니까? 모든 서클을 선택하고 사용자가 한 서클 위로 마우스를 가져 가면 해당 서클을 선택하여 앞으로 가져옵니다. 아주 간단 해요!

그리고 여기 에 라이브 코드 가있는 JSFiddle 이 있습니다.