Thử tài xếp hình của bạn với JavaScript

2

JavaScript có thể giúp chúng ta làm được những điều mà bạn chỉ đang tưởng tượng trong đầu. Các hiệu ứng được thực hiện từ JS cho chúng ta cảm giác mượt mà hơn CSS. Hôm nay, tôi sẽ giới thiệu tới các bạn một hiệu ứng tương tác rất thú vị. Các bạn có thể chơi với hiệu ứng này đấy.

Thử tài xếp hình của bạn với JavaScript JavaScript - Thử tài xếp hình của bạn với JavaScript

Trong bài này chúng ta sẽ không cần sử dụng quá nhiều Code. Với HTML các bạn chỉ cần khai báo như sau để gọi thư viện JS về:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

Tiếp đến chúng ta sẽ sử dụng đoạn JavaScript sau đây:

//Chieu rong va chieu cao
			var w = 750;
			var h = 500;
			//Du lieu goc
			var dataset = {
				nodes: [
					{ name: "Adam" },
					{ name: "Bob" },
					{ name: "Carrie" },
					{ name: "Donovan" },
					{ name: "Edward" },
					{ name: "Felicity" },
					{ name: "George" },
					{ name: "Hannah" },
					{ name: "Iris" },
					{ name: "Jerry" }
				],
				edges: [
					{ source: 0, target: 1 },
					{ source: 0, target: 2 },
					{ source: 0, target: 3 },
					{ source: 0, target: 4 },
          { source: 0, target: 5 },
          { source: 0, target: 9 },
					{ source: 1, target: 5 },
					{ source: 2, target: 5 },
					{ source: 2, target: 5 },
					{ source: 3, target: 4 },
					{ source: 5, target: 8 },
					{ source: 5, target: 9 },
					{ source: 6, target: 7 },
					{ source: 7, target: 8 },
					{ source: 8, target: 9 }
				]
			};

var force = d3.layout.force() 
  .nodes(dataset.nodes)
  .links(dataset.edges)
  .size([w, h])
  .linkDistance([100])
  .charge([-300])
  .start();

//Dieu chinh mau sac
var colors = d3.scale.category10();

//Su dung SVG
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var edges = svg.selectAll("line") 
  .data(dataset.edges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", 1);

var nodes = svg.selectAll("circle") 
  .data(dataset.nodes)
  .enter()
  .append("circle")
  .attr("r", 16)
  .style("fill", function(d, i) {
    return colors(i); 
  })
  .call(force.drag);

force.on("tick", function() {
edges.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; });
nodes.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; });
});

Đấy, chúng ta chỉ cần bấy nhiêu cho hiệu ứng này. Ngay bây giờ mời các bạn cùng tôi chơi một trò chơi nhỏ. Các bạn hãy thử tài của mình để xếp cho ra được một hình nào đó nhé.


Sao rồi bạn, bạn đã xếp được hình nào ra hồn chưa. Cho tôi và mọi người thấy thành quả của bạn bằng cách bình luận bên dưới nhé.  :mrgreen: JavaScript - Thử tài xếp hình của bạn với JavaScript

2 Comments
  1. Thành Nguyễn nói

    Vui thật đấy 🙂

  2. Lê Tuấn nói

    Giờ mới đọc được bài này, rất thú vị 🙂

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.