0
214
Viewscoloque la imagen dentro de la cuadrícula usando d3js
Quiero colocar imágenes dentro de cada cuadrícula de acuerdo con el objeto de datos usando d3.js. aquí, usando los datos, cada cuadrado se representa en una cuadrícula usando la biblioteca d3js. el problema aquí es que la imagen no se muestra dentro de cada cuadrícula, pero se representa correctamente dentro de cada cuadrícula adecuada. puede encontrar el resultado actual y el resultado esperado a continuación en las imágenes. aquí está el código:
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 dx; }) .attr("y", function(d) { return dy; }) .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> las imágenes se representan dentro del rect pero no se muestran.
aquí está el resultado actual:
Este es el resultado esperado:
¿Alguien puede averiguar cuál es el problema aquí? cualquier ayuda es apreciada.
·
Santiago Trujillo
1 answers
Answer question0
también se puede lograr usando lo siguiente:
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 dx; }) .attr("y", function(d) { return dy; }) .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 dx; }) .attr("y", function(d) { return dy; }); //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>
·
Santiago Trujillo
Report
Answer question