Tôi có thể sử dụng hình ảnh làm hình chữ nhật nền cho d3 treemaps không?

Question

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?

Answer 1

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)"); 

Answer 2

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); 

Answer 3

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);