단순 D3.js 면적도

다음을 살펴보겠습니다.
10.
Y
0
십
일.
십오
이.
35
삼.
이십
제작:

D3.js는 MindBinding입니다. D3에서 예시를 찾았습니다.jswiki는 설명이 너무 적고 일어난 일이 너무 많아요.이 예에서, 나는 당신에게 내가 설계할 수 있는 가장 간단한 면적도를 어떻게 만드는지 보여 드리겠습니다.정답으로 바로 이동하려면 the complete JavaScript 을 참조하십시오.
D3.js는 차트 라이브러리가 아닙니다.이것은 도표 부품 라이브러리다.이 라이브러리는 마치 SVG와 데이터 처리의 혼합체처럼 위에 설탕을 약간 뿌렸다.비록 매우 큰 유연성을 가지고 있지만 유연성은 복잡성을 대가로 한다.우리 잠수하자.
도표를 구축하기 위해서는 데이터, SVG 용기, 간격, X축, Y축, 지역 형상 자체, 그리고 예뻐 보이는 CSS가 필요합니다.

데이터

TSV 또는 CSV 로더 또는 콜백 내용을 흐트러뜨리지 않습니다.이것은 간단명료한 데이터다.

var data = [
    { x: 0, y: 10, },
    { x: 1, y: 15, },
    { x: 2, y: 35, },
    { x: 3, y: 20, },
];

SVG

D3는 SVG를 사용하여 모양을 그립니다.새 태그<svg>를 동적으로 만들 수 있지만 HTML 소스 코드에 다음 내용을 추가했습니다.

<svg id="area" />

이윤율

D3의 차트에는 여백이 없지만 D3의 주요 작성자는 항상 정의에 대해 이야기합니다conventional margins.여백을 만들고 SVG 그룹(즉, g 태그)을 정의하는 것이 그 생각입니다. 이 그룹은 이러한 여백 경계로 설정됩니다.이 코드는 그룹 태그만 도면 가능 영역으로 간주합니다.

var margin = {top: 20, right: 20, bottom: 40, left: 50},
    width = 575 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;

축선

D3는 확장 가능한 방식으로 데이터를 그리기 위해 데이터 (예: x=0, y=10) 를 픽셀 위치에 매핑해야 합니다.최대 X 값 (3) 이 차트 영역의 픽셀 폭과 일치하도록 X 데이터를 가져와 축에 설정해야 합니다.D3는 유연하기 때문에 X와 Y는 독립적으로 정의되어야 합니다.
수학 시간에 당신은 X 대표 구역, Y 대표 범위를 가르칠 수 있습니다.불행하게도 D3는 축에 도메인/범위 항목을 사용합니다.우리는 X 데이터(0-3)를 영역으로 보고 도표의 수평 차원(0-width을 범위로 간주해야 한다.같은 사고방식도 Y축(0-35는 도표의 수직 차원에 적용)에 적용된다.x 및 y 변수를 변환기 함수로 간주하여 필드 값을 가져와 픽셀 크기로 변환할 수 있습니다.xAxis 및 yAxis 지시축이 어디로 가야 하는지.

var x = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.x; })])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

지역

면적 함수는 각 데이터 점(예: (2,35)을 묘사 형태의 정보로 변환합니다.각각 x위치, y상위y1와 y아래위치y0에 대응한다.이상하게도 y0 는 height 의 상수로 설정되어 있다.SVG가 도면의 왼쪽 위 모서리를 기준으로 위치를 정하는 것을 알고 있을 때 의미가 있습니다.모든 거리는 양수이므로 양height은 도면의 아래쪽을 나타냅니다.

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(height)
    .y1(function(d) { return y(d.y); });

그것들을 한데 모으다

지금까지 우리는 일부 데이터와 함수를 정의하는 것 외에 아직 아무것도 하지 않았다.지금 우리는 이러한 기능을 발휘하도록 해야 한다.

var svg = d3.select("svg#area")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg의 변수 정의는 IDsvg의area 태그를 가져오고 그룹 태그g를 추가하여 SVG 내의 여백을 정의합니다.모든 드로잉은 이 레이블g 내에서 수행됩니다.
다음 섹션이 추가되었습니다path.이것은 데이터와 면적 함수의 교차점이다.이것은 전체 예시의 중점이다.D3는 각 데이터 점을 사용하여 area 함수에 전달합니다.area 함수는 데이터를 SVG 경로의 위치로 변환합니다.이로 인해 다음과 같은 결과가 발생합니다.

<path class="area" d="M0,214.28571428571428L168.33333333333331,
171.42857142857142L336.66666666666663,0L505,128.57142857142858L505,
300L336.66666666666663,300L168.33333333333331,300L0,300Z"/>

마지막 두 부분은 SVG에 축을 추가합니다.그들에 관해서는 할 말이 없다.

예쁘게 만들어줘요.

요컨대 나는 .attr("class", "area") 의 해석을 소홀히 했다.D3를 사용하여 태그 속성을 추가할 수 있습니다attr().도형을 스타일링할 수 있도록 class 속성을 추가했습니다.SVG는 표준 HTML 태그와 다른 속성을 사용하지만 다음 스타일은 그래픽을 간단하게 보여줍니다.

svg { border: 1px solid #dedede; }

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area { fill: #4ca3bd; }

본고는 처음으로 mattlayman.com에 나타났다.