D3.js

Ang D3.js ay isang JavaScript library na ginagamit sa pagpapatakbo ng HTML data.

Madali ang gamitin ang D3.js.

Paano gamitin ang D3.js?

Kung gustong gamitin ang D3.js sa iyong web page, magdagdag ng link patungo sa library:

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

Ang script na ito ay pinili ang elementong body at nagdagdag ng isang paragrapong may teksto na "Hello World!"

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

Subukan Nang Higit Pa

散点图

实例

// 设置维度
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 + ")");
// X 轴
const x = d3.scaleLinear()
  .domain([0, 500])
  .range([0, xMax]);
svg.append("g")
  .attr("transform", "translate(0," + yMax + ")")
  .call(d3.axisBottom(x));
// Y 轴
const y = d3.scaleLinear()
  .domain([0, 500])
  .range([ yMax, 0]);
svg.append("g")
  .call(d3.axisLeft(y));
// 点
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");

Subukan Nang Higit Pa