D3.js를 사용하여 테이블을 만드는 방법 소개

D3는 현재 가장 인기 있는 JavaScript 시각적 차트 라이브러리 중 하나입니다. D3는 매우 풍부한 차트 유형을 갖고 있으며 SVG 형식을 지원하므로 MetricsGraphics.js와 같이 D3를 기반으로 개발된 차트 플러그인도 많이 사용됩니다. , D3 차트에 구축된 데이터는 매우 강력합니다.

D3는 데이터 시각화를 위한 Javascript 라이브러리입니다. SVG, 캔버스, HTML을 사용하세요. DOM 조작에 대한 데이터 기반 접근 방식과 강력한 시각화 기술을 결합합니다.

D3와 JQuery D3의 차이점은 데이터 기반이지만 JQuery는 그렇지 않습니다. JQuery를 사용하여 요소를 직접 조작하지만 D3
를 사용할 때는 D3의 독점 data(), enter() 및 종료를 통해 데이터와 데이터를 제공해야 합니다. () 메서드 콜백을 실행한 다음 D3가 해당 요소에 대해 작업을 수행합니다. D3는 일반적으로 데이터 시각화에 사용되며 JQuery는 웹 애플리케이션을 만드는 데 사용됩니다. D3에는 많은 데이터 시각화 확장이 있습니다. JQuery용 웹 애플리케이션 플러그인도 많습니다. 둘 다 CSS 선택기와 유창한 API를 제공하는 Javascript DOM 조작 라이브러리입니다.

D3와 JQuery의 차이점은 무엇인가요?

가장 일반적으로 사용되는 방법

d3.select(selector): 선택기와 일치하는 첫 번째 요소를 선택합니다. 일치하는 요소가 없으면 빈 선택 항목을 반환합니다(그러나 null 또는 정의되지 않음).

d3.selectAll(selector): select()와 달리 일치하는 모든 요소가 선택됩니다.

selection.append(type): 지정된 유형이 문자열인 경우 이 유형(태그 이름)을 선택한 각 요소의 마지막 하위 요소에 새 요소로 추가합니다.

selection.attr(name, [value]): 값이 결정되면 선택 항목에서 name이라는 속성 값을 value로 설정합니다. value는 상수이거나 메서드일 수 있습니다. 값이 제공되지 않으면 선택 항목에서 비어 있지 않은 첫 번째 요소의 이름 속성의 현재 값을 반환합니다.

selection.data([data[,key]]): 데이터와 요소를 바인딩하고 새로운 선택 항목을 반환합니다.

selection.enter(): 입력 선택을 반환합니다. 이때 DOM 요소는 해당 데이터보다 적습니다. 누락된 DOM 요소를 추가하는 데 사용됩니다. 예:

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

본문이 비어 있는 경우 위 코드는 데이터를 기반으로 새 p 요소를 만든 다음 이를 body 요소에 추가하고 텍스트 내용을 해당 숫자로 설정합니다. 페이지 결과는 다음과 같습니다:

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit(): 종료 선택을 반환합니다. 이때 해당 데이터보다 DOM 요소가 더 많습니다. 중복된 DOM 요소를 제거하는 데 사용됩니다. 예를 들어 위의 예를 기반으로 데이터를 업데이트하려고 합니다.

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; } ); code><code>p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

因为此时指定了key方法（用于指定数据和元素匹配的顺序等），并且数据[4,8,16]匹配已经存在的元素，所以update selection只包含3个p元素。我们可以使用enter selection添加3个新元素：

p.enter().append("p").text(function(d) { return d; });

然后，还需要移除不需要的元素[15, 23, 42]：

p.exit().remove();

이때 키 메소드가 지정되고(데이터의 순서 및 요소 일치 등을 지정하는 데 사용됨) 데이터 [4,8,16]이 기존 요소와 일치하므로 업데이트 선택 3개의 p 요소만 포함합니다. Enter 선택을 사용하여 3개의 새로운 요소를 추가할 수 있습니다:

p.enter().append("p").text(function(d) { return d; });

그러면 불필요합니다. 요소도 제거해야 합니다 [15, 23, 42]:

p.exit().remove();

페이지 결과:

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

히스토그램 만들기

막대 차트 예시

D3를 사용하려면 SVG의 구조에 대한 이해가 필요합니다. 어떤 그래픽을 그려야 하는지, 어떤 레이블을 사용해야 하는지, 레이블에 대해 어떤 속성을 정의해야 하는지 등을 설명합니다. 예를 들어 주로 XY 좌표 축과 열로 구성된 히스토그램을 만듭니다. XY 축은 선 레이블을 사용하여 직선을 그리고 텍스트 레이블을 사용하여 눈금의 텍스트를 표시합니다. 열은 직사각형을 그리기 위해 각형 태그를 사용합니다. 모서리가 둥근 직사각형을 원한다면 직사각형 태그의 rx 또는 ry 속성을 설정할 수 있습니다. 및 y 속성 등 이런 식으로 부품들이 서로 결합되어 그림을 형성합니다.
다음 내용은 D3 3.x의 API를 기반으로 합니다. 일부 인터페이스는 D3 4.0과 다릅니다.

D3 3.x API 참조

D3 4.0 API 참조

루트의 svg

D3 도면은 먼저 svg 요소를 생성하고 너비 및 높이와 같은 속성을 정의해야 합니다.

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

좌표 축

을 만들려면 좌표축을 사용하려면 먼저 D3 스케일을 사용해야 합니다. 좌표축의 스케일을 설정하거나 현재 스케일을 반환하려면 axis.scale([scale]) 메서드를 사용하세요. 척도는 다음과 같이 나뉩니다.

양적 척도: 숫자와 같은 연속 데이터. 시간 척도: 데이터는 시간입니다. 순서 척도: 이름, 범주 등과 같은 개별 데이터입니다.

예를 들어 시간 척도가 있는 X축과 수치 척도가 있는 Y축을 생성하려는 경우 시간 척도와 정량 척도, 더 구체적으로 선형 척도를 사용할 수 있습니다.

d3.scale.linear(): 선형 스케일을 만듭니다. d3.time.scale(): 시간 척도를 생성합니다. 틱 및 틱 형식은 현지 시간으로 구성됩니다.

🎜스케일을 결정한 후에는 입력 도메인과 출력 범위도 설정해야 합니다. 예를 들어 x축의 척도는 다음과 같습니다. 🎜

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

🎜 최소 날짜와 최대 날짜는 모두 날짜 개체입니다. 그런 다음 X 좌표축의 스케일을 설정하고 생성합니다. 🎜

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

🎜틱의 매개변수 유형은 해당 스케일의 유형에 따라 다릅니다. 여기에 전달되는 매개변수는 시간 간격이며, 이는 틱이 하루 간격임을 의미합니다. 🎜tickFormat을 사용하면 눈금의 텍스트 형식을 사용자 정의할 수 있습니다. 🎜

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

위 내용은 D3.js를 사용하여 테이블을 만드는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!