D3.js

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

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

Làm thế nào để sử dụng D3.js?

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

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

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

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

Thử ngay

biểu đồ điểm

thực thể

// Đặt kích thước
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;
// Tạo điểm ngẫu nhiên
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax]);

// Thêm đối tượng SVG vào trang
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