place image inside grid using d3js

Question

I want to place images inside each grid according to the data object using d3.js. here using the data each square is rendered into a grid using the d3js library. the problem here is that the image is not showing inside each grid, but it is rendering correctly inside each appropriate grid. you can find the current result and expected result below in the images. here is the code:

var data = [
    [{
        "x": 1,
        "y": 1,
        "width": 400,
        "height": 400,
        "image": "https://lh3.googleusercontent.com/wAPeTvxh_EwOisF8kMR2L2eOrIOzjfA5AjE28W5asyfGeH85glwrO6zyqL71dCC26R63chADTO7DLOjnqRoXXOAB8t2f4C3QnU6o0BA"
    }, {
        "x": 401,
        "y": 1,
        "width": 400,
        "height": 400,
        "image": "https://lh3.googleusercontent.com/Skyrdo9OUfXzZ-1N-jdhGbmpkx6G7r9QYfA3p6EKhb0u9ES4cZD9Z9C92BxM3A9VyLgHJHB7ALTPOlIfJxVLrpzYrLzPIUZsQX9mD4U"
    }],
    [{
        "x": 1,
        "y": 401,
        "width": 400,
        "height": 400,
        "image": "https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh"
    }, {
        "x": 401,
        "y": 401,
        "width": 400,
        "height": 400,
        "image": "https://lh3.googleusercontent.com/IsGCHOz6W_CthCyx28PlKaZSzTHMY-nzZVBu0UUKTkhfD52WmJ-xvOIverssPjgBAGeSIBGwbP2qt7OJ-HpI7t-mToRc_xSFhCDv"
    }]
]
var grid = d3
    .select("#grid")
    .append("svg")
    .attr("width", "1350px")
    .attr("height", "1350px");

var row = grid
    .selectAll(".row")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "row");

var column = row
    .selectAll(".square")
    .data(function(d) {
        return d;
    })
    .enter()
    .append("rect")
    .attr("class", "square")
    .attr("x", function(d) {
        return d.x;
    })
    .attr("y", function(d) {
        return d.y;
    })
    .attr("width", function(d) {
        return d.width;
    })
    .attr("height", function(d) {
        return d.height;
    })
    .style("fill", "#fff")
    .style("stroke", "#222")
    .attr("transform", "translate(50,50)scale(0.5)")
    .append("svg:image")
    .attr("xlink:href", function(d) {
        return d.image;
    })
    .attr("width", function(d) {
        return d.width;
    })
    .attr("height", function(d) {
        return d.height;
    });

<html>

<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script src="stack.js" type="text/javascript"></script>
</body>

</html>

the images are rendering inside the rect but is not showing.

here is the current result:

this is the expected result:

can anyone figure out what is the problem here? any help is appreciated.

you are trying to append the svg image inside the rect. This can't work. Append images to a group or to the svg element itself — enxaneta, Mar 19 '22 at 08:28

Robin Mackenzie · Answer 1 · 2022-03-21T10:26:48.227

See here and here - meaning you can solve your issue by setting up 4 <patterns> in the <defs> for your svg and then use them as fills for each rect. There's a good d3 approach for that here.

Working example:

// your OP code for data
var data = [
  [
    {
      "x": 1, 
      "y": 1, 
      "width": 400, 
      "height": 400,  
      "image": "https://lh3.googleusercontent.com/wAPeTvxh_EwOisF8kMR2L2eOrIOzjfA5AjE28W5asyfGeH85glwrO6zyqL71dCC26R63chADTO7DLOjnqRoXXOAB8t2f4C3QnU6o0BA"
    }, 
    {
      "x": 401, 
      "y": 1, 
      "width": 400, 
      "height": 400, 
      "image": "https://lh3.googleusercontent.com/Skyrdo9OUfXzZ-1N-jdhGbmpkx6G7r9QYfA3p6EKhb0u9ES4cZD9Z9C92BxM3A9VyLgHJHB7ALTPOlIfJxVLrpzYrLzPIUZsQX9mD4U"}
  ], 
  [
    {
      "x": 1, 
      "y": 401, 
      "width": 400, 
      "height": 400, 
      "image": "https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh"
    }, 
    {
      "x": 401, 
      "y": 401, 
      "width": 400, 
      "height": 400, 
      "image": "https://lh3.googleusercontent.com/IsGCHOz6W_CthCyx28PlKaZSzTHMY-nzZVBu0UUKTkhfD52WmJ-xvOIverssPjgBAGeSIBGwbP2qt7OJ-HpI7t-mToRc_xSFhCDv"
    }
  ]
]

// your OP code for the svg
var grid = d3
    .select("#grid")
    .append("svg")
    .attr("width", "1350px")
    .attr("height", "1350px");

// NEW code to add defs with patterns containing images
// See this post: https://stackoverflow.com/questions/41486864/svg-image-inside-rect-not-displayed?noredirect=1&lq=1
var defs = grid.append("svg:defs");

for (let r=0; r<data.length; r++) {
  for (let c=0; c<data[r].length; c++) {
    let gridItem = data[r][c];
    gridItem.imgId = `img_${r}_${c}`;
    defs.append("svg:pattern")
      .attr("id", gridItem.imgId)
      .attr("width", gridItem.width)
      .attr("height", gridItem.height)
      .attr("patternUnits", "userSpaceOnUse")
      .append("svg:image")
      .attr("xlink:href", gridItem.image)
      .attr("width", gridItem.width)
      .attr("height", gridItem.height)
      .attr("x", 0)
      .attr("y", 0);  
  }
}

// your OP code for rows
var row = grid
  .selectAll(".row")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "row");

// your adjusted OP code for columns
var column = row
  .selectAll(".square")
  .data(function(d) {return d;})
  .enter()
  .append("rect")
  .attr("class", "square")
  .attr("x", function(d) {return d.x;})
  .attr("y", function(d) {return d.y;})
  .attr("width", function(d) {return d.width;})
  .attr("height", function(d) {return d.height;})
  .style("fill", "#fff")
  .style("stroke", "#222")
  .attr("transform", "translate(50,50)scale(0.5)")
  // instead of adding svg:image use the defs instead
  .style("fill", function(d) {return "url(#" + d.imgId + ")";})

<html>

<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script src="stack.js" type="text/javascript"></script>
</body>

</html>

appreciate your effort. but the images have been included manually, what if there are 250 columns and rows. — Adharsh Chottu, Mar 21 '22 at 05:04
@AdharshChottu - see my edit - the images are now added in a loop that recognises the rows/ columns structure of `data` and gets to the same outcome. I also removed `imgId` from the `data` and add it on the fly as the images are dealt with. Does that improve the answer ? — Robin Mackenzie, Mar 21 '22 at 10:28

score 0 · Accepted Answer · answered Mar 23 '22 at 17:57

it can be also achieved using the follows:

var data = [{
    "x": 1,
    "y": 1,
    "width": 400,
    "height": 400,
    "image": "https://lh3.googleusercontent.com/wAPeTvxh_EwOisF8kMR2L2eOrIOzjfA5AjE28W5asyfGeH85glwrO6zyqL71dCC26R63chADTO7DLOjnqRoXXOAB8t2f4C3QnU6o0BA"
}, {
    "x": 401,
    "y": 1,
    "width": 400,
    "height": 400,
"image": "https://lh3.googleusercontent.com/Skyrdo9OUfXzZ-1N-jdhGbmpkx6G7r9QYfA3p6EKhb0u9ES4cZD9Z9C92BxM3A9VyLgHJHB7ALTPOlIfJxVLrpzYrLzPIUZsQX9mD4U"
}, {
    "x": 1,
    "y": 401,
    "width": 400,
    "height": 400,
    "image": "https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh"
}, {
    "x": 401,
    "y": 401,
    "width": 400,
    "height": 400,
    "image": "https://lh3.googleusercontent.com/IsGCHOz6W_CthCyx28PlKaZSzTHMY-nzZVBu0UUKTkhfD52WmJ-xvOIverssPjgBAGeSIBGwbP2qt7OJ-HpI7t-mToRc_xSFhCDv"
}]
var grid = d3
    .select("#grid")
    .append("svg")
    .attr("width", "1350px")
    .attr("height", "1350px");

/* var row = grid
    .selectAll(".row")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "row"); */

var column = grid
    .selectAll(".square")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "square")
    .attr("x", function(d) {
        return d.x;
    })
    .attr("y", function(d) {
        return d.y;
    })
    .attr("width", function(d) {
        return d.width;
    })
    .attr("height", function(d) {
        return d.height;
    })
    .style("fill", "#fff")
    .style("stroke", "#222");

var images = grid
    .selectAll("image")
    .data(data)
    .enter()
    .append("svg:image")
    .attr("xlink:href", function(d) {
        return d.image;
    })
    .attr("width", function(d) {
        return d.width;
    })
    .attr("height", function(d) {
        return d.height;
    })
    .attr("x", function(d) {
        return d.x;
    })
    .attr("y", function(d) {
        return d.y;
    });
//remove invalid image tags
d3.selectAll("image").filter(function() {
    return d3.select(this).attr("href") == null
}).remove()

<html>

<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <div id="grid"></div>
    <script src="stack.js" type="text/javascript"></script>
</body>

</html>

place image inside grid using d3js

2 Answers2