Czy mogę używać obrazów jako prostokątów tła dla tremap d3?

Question

Czy możliwe jest wykonanie treemap w d3 z tłem każdego prostokąta jako obraz? Szukam czegoś podobnego do tego, co zostało zrobione w Silverlight here, ale dla d3. Jeśli to możliwe, czy są jakieś zalecane samouczki, które przechodzą proces łączenia tła z obrazem?

Answer 1

Tak, istnieje kilka sposobów użycia obrazów w SVG. Prawdopodobnie chcesz zdefiniować obraz jako wzór, a następnie użyć go do wypełnienia prostokąta. Aby uzyskać więcej informacji, zobacz np. this question (procedura jest taka sama, niezależnie od elementu, który chcesz wypełnić).

W kodzie D3 wyglądałoby to tak (uproszczone).

svg.append("defs") 
    .append("pattern") 
    .attr("id", "bg") 
    .append("image") 
    .attr("xlink:href", "image.jpg"); 

svg.append("rect") 
    .attr("fill", "url(#bg)"); 

Answer 2

Ważne, aby pamiętać, że obraz musi mieć szerokość, wysokość atrybuty

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

Stosując wzory dodać zdjęcie w prostokącie można dokonać wizualizacji dość powolna.

można zrobić coś takiego, że zamiast tego, jest to kod użyłem do moich węzłów prostokątne w układzie sił, chciałem umieścić prostokąty wypełnione przez obraz jako węzły:

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