D3.js

D3.js là một thư viện JavaScript được sử dụng để thao tác với dữ liệu HTML.

D3.js rất dễ sử dụng.

Cách sử dụng D3.js?

Nếu bạn muốn sử dụng D3.js trên trang web, hãy thêm liên kết đến thư viện:

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

mã này chọn phần tử body và thêm một đoạn văn bản có văn bản "Hello World!":

d3.select("body").append("p").text("Hello World!");

Thử ngay

diagram điểm

thực thể

// 设置维度
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;
// 创建随机点
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax]);
}
// 将 SVG 对象追加到页面
const svg = d3.select("#myPlot")
  .append("svg")
  .append("g")
  .attr("transform","translate(" + margin + "," + margin + ")");
// Trục X
const x = d3.scaleLinear()
  .domain([0, 500])
  .range([0, xMax]);
svg.append("g")
  .attr("transform", "translate(0," + yMax + ")")
  .call(d3.axisBottom(x));
// Trục Y
const y = d3.scaleLinear()
  .domain([0, 500])
  .range([ yMax, 0]);
svg.append("g")
  .call(d3.axisLeft(y));
// Điểm
svg.append('g')
  .selectAll("dot")
  .data(data).enter()
  .append("circle")
  .attr("cx", function (d) { return d[0] } )
  .attr("cy", function (d) { return d[1] } )
  .attr("r", 3)
  .style("fill", "Red");

Thử ngay