D3 Examples - d3.js: Q: pack layout with images

Experiment …… ∆ ∞

==========================================================================

A little alternative way to use the SVG object and D3:

D3 code creates a layout-based mask, where each node is a circle + circle-clipped 'silhouette' image, which is, of course, included in the generated mask.

WARNING: clip-mask applied to elements inside a SVG mask don't work in Safari/Win; Chrome works okay, so this result is best viewed in bleeding edge Chrome.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Circle Packing</title>
    <script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
    <script type="text/javascript" src="https://gerhobbelt.github.com/bl.ocks.org-hack/fixit.js" ></script>
        <style>
circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0.2;
}
​
.depth-0 circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 6px;
  stroke-opacity: 0.7;
}
​
circle {
  fill: white;
  fill-opacity: 0.25;
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0.2;
}
​
​
.leaf circle.border {
  stroke: white;
  stroke-width: 1px;
  stroke-opacity: 1;
  stroke-dasharray: 1,1;
}
​
text {
  fill: white;
  fill-opacity: 0.4;
  font: 10px sans-serif;
}
        </style>
  </head>
  <body>
    <div id="chart">
            <svg>
                <g>
                    <clipPath id="circle-clipper" clipPathUnits="objectBoundingBox">
                        <circle cx="0.5" cy="0.5" r="0.35" style="fill: grey; opacity: 1;" />
                    </clipPath>
                    <mask id="fademask" style="maskUnits: userSpaceOnUse;">
                    </mask>
                </g>
                <image xlink:href="Konachan.com-46061.black_lagoon.revy.960.jpg" x="0" y="0"
                                width="960" height="500"
                                style="mask: url(#fademask); preserveAspectRatio: xMidyMid slice" />
                <g id="bugger">
                </g>
        </svg>
        </div>
    <script type="text/javascript" src="pack2.js"></script>
  </body>
</html>
    