Có thể tạo một sơ đồ trang trí bằng d3 với nền của mỗi hình chữ nhật là một hình ảnh không? Tôi đang tìm kiếm một cái gì đó tương tự như những gì đã được thực hiện trong Silverlight here, nhưng đối với d3. Nếu có thể, có bất kỳ hướng dẫn được đề xuất nào đi qua quá trình kết nối nền với hình ảnh không?Tôi có thể sử dụng hình ảnh làm hình chữ nhật nền cho d3 treemaps không?
8
A
Trả lời
7
Có, có một số cách sử dụng hình ảnh trong SVG. Bạn có thể muốn xác định hình ảnh như là một mẫu và sau đó sử dụng nó để điền vào hình chữ nhật. Để biết thêm thông tin, xem ví dụ: this question (thủ tục là như nhau bất kể phần tử bạn muốn điền).
Trong mã D3, nó sẽ trông giống như thế này (được đơn giản hóa).
svg.append("defs")
.append("pattern")
.attr("id", "bg")
.append("image")
.attr("xlink:href", "image.jpg");
svg.append("rect")
.attr("fill", "url(#bg)");
5
quan trọng của nó để lưu ý rằng các hình ảnh cần phải có chiều rộng, chiều cao tính
chart.append("defs")
.append('pattern')
.attr('id', 'locked2')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append("image")
.attr("xlink:href", "locked.png")
.attr('width', 4)
.attr('height', 4);
2
Sử dụng các mẫu để thêm một hình ảnh trong một hình chữ nhật có thể làm cho hình dung của bạn khá chậm.
Bạn có thể làm một cái gì đó như thế thay vào đó, đây là đoạn code tôi sử dụng cho các nút hình chữ nhật của tôi vào một cách bố trí lực lượng, tôi muốn đặt hình chữ nhật lấp đầy bởi một hình ảnh như các nút:
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node");
node.append("rect")
.attr("width", 80)
.attr("height", 120)
.attr("fill", 'none')
.attr("stroke", function (d) {
return colors(d.importance);
});
node.append("image")
.attr("xlink:href", function (d) { return d.cover;})
.attr("x", 2)
.attr("width", 76)
.attr("height", 120)
.on('dblclick', showInfo);
Các vấn đề liên quan
- 1. Đoạn văn bản SVG theo chiều rộng của hình chữ nhật trong hình chữ nhật D3
- 2. Tôi có thể vẽ hình chữ nhật trong XML không?
- 3. d3 js làm hình ảnh
- 4. d3.js Biểu đồ Sankey: hình chữ nhật tô màu
- 5. Phát hiện vùng sáng hình chữ nhật trong Hình ảnh bằng cách sử dụng OpenCv
- 6. Tại sao tôi không thể sử dụng hình nền?
- 7. Nút iPhone có hình dạng không phải hình chữ nhật?
- 8. CSS: Chỉ có thể lặp lại một phần của hình ảnh để sử dụng làm nền?
- 9. Đặt hình nền cho màu phông chữ?
- 10. Sử dụng Python, làm cách nào để tôi biết hình chữ nhật và hình dạng có trùng lặp không?
- 11. d3.js xây dựng một mạng lưới hình chữ nhật
- 12. Tôi có thể có nhiều hình nền bằng CSS không?
- 13. Cách cắt hình chữ nhật từ hình ảnh trong android
- 14. Thuật toán để giảm hình ảnh thành hình chữ nhật?
- 15. Cách sử dụng hình ảnh cho nền trong tkinter?
- 16. Hình ảnh hoạt hình nền
- 17. Bạn có thể tạo hình chữ nhật 3xn với hình chữ nhật 2x1 bằng cách nào?
- 18. Tôi có thể sử dụng hình ảnh từ hệ thống tệp cục bộ của mình làm nền trong HTML không?
- 19. RS2008 Hình ảnh nền Sizing
- 20. Android hình ảnh lập trình lát nền làm hình nền
- 21. Tại sao không thể sử dụng điểm và hình chữ nhật làm thông số tùy chọn?
- 22. Tôi có thể áp dụng bộ lọc CSS cho hình nền không?
- 23. Làm thế nào tôi có thể viết lại mẫu GLCameraRipple bằng Hình ảnh làm nền?
- 24. Tôi có thể chuyển đổi hình ảnh sang CSS3 không?
- 25. Làm cách nào để quấn văn bản xung quanh hình ảnh không phải hình chữ nhật?
- 26. Làm thế nào tôi có thể thực hiện cắt trên hình chữ nhật xoay?
- 27. sử dụng hình nền cho li
- 28. Tại sao có hình chữ nhật khung và hình chữ nhật có viền trong UIView?
- 29. CSS: Có thể chỉ sử dụng một phần được đặt làm hình nền làm phụ trang nền không?
- 30. Cocos2d: Hình chữ nhật chữ nhật màu rắn?
vừa tạo một [fiddle ] (http://jsfiddle.net/headwinds/6eu0xnvt/#base) để kiểm tra và hoạt động tốt! – headwinds
fiddle không khả dụng. Lỗi 404 – Nidheesh
[đây là một fiddle hoạt động] (https://jsfiddle.net/dnc042/fd7svrx6/7/) –