Question

0

220

Visualizações

place image inside grid using d3js

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.

over 4 years ago · Santiago Trujillo

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-03-25T13:54:47.089Z

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>

0

220

place image inside grid using d3js

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT