Electrical Engineer turned Data Scientist. Married to Awesome. Occasional drawer of Minions.

Sử dụng D3js và SVG clipPath để tạo hiệu ứng đường chuyển động

Nếu dùng D3js, có lúc nào bạn tự hỏi làm thế nào để tạo ra 1 đường thẳng chạy giống như hình dưới?

NYC Taxi - A Day in Life

Hehe hình trên chỉ mang tính câu view. Mặc dù tác giả Chris Whong của The NewYork Times đã làm hiệu ứng đường thẳng chạy trong chương trình trên bằng một kỹ thuật khác, trong bài này, tôi trình bày cách sử dụng <clipPath> của svg để tạo hiệu ứng tương tự trong những trường hợp đơn giản hơn.

Thế nào là "clipPath"?

Từ clip trong tiếng Anh có rất nhiều nghĩa. Trong các nghĩa mà từ điển Oxford cung cấp, có 1 nghĩa ứng với nghĩa trong svg, đó là cắt tỉa.

Path nghĩa là đường (trong đường thẳng, đường nét). Vậy cứ tưởng tượng khi ta clip path một bức hình, là ta đang cầm kéo cắt tấm hình đó theo 1 đường bao vạch sẵn, sao đó vứt phần bên ngoài đi, chử giữ lại phần bên trong. Xem hình minh họa dưới đây sẽ rõ (nguồn của bức hình):

Sử dụng "clipPath" như thế nào?

House with door