0
211
Vistas¿Cómo dibujar un cuadrado usando el área en d3.js?
¿Cómo dibujar un cuadrado usando el área en d3.js? ¿Es posible hacer eso?
Mi código:
var data = [ {x: 0, y: 0}, {x: 5, y: 0}, {x: 0, y: 5}, {x: 5, y: 5}, ]; var xScale = d3.scaleLinear().domain([0, 6]).range([25, 175]); var yScale = d3.scaleLinear().domain([0,20]).range([175, 25]); var area = d3.area() .x(d => xScale(dx)) .y0(yScale(0)) .y1(d => yScale(dy)); d3.select("#demo1") .append("path") .attr("d", area(data)) .attr("fill", "red") .attr("stroke", "black"); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg id="demo1" width="200" height="200"></svg> Resultado de este código:
¡Gracias por la ayuda!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puedes crear un cuadrado usando d3.area() usando los siguientes puntos:
var points = [ { xpoint: 0, ypoint: 200 }, { xpoint: 200, ypoint: 200 } ]; var points = [ { xpoint: 0, ypoint: 200 }, { xpoint: 200, ypoint: 200 } ]; var Gen = d3.area() .x((p) => p.xpoint) .y0((p) => 0) .y1((p) => p.ypoint); d3.select("#gfg") .append("path") .attr("d", Gen(points)) .attr("fill", "green") .attr("stroke", "black"); svg { border: 1px solid red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg id="gfg" width="200" height="200"></svg>Para la forma de su imagen , intente los siguientes puntos:
var points = [ { xpoint: 0, ypoint: 0 }, { xpoint: 100, ypoint: 100 }, { xpoint: 125, ypoint: 125 }, { xpoint: 150, ypoint: 175 }, { xpoint: 190, ypoint: 175 }, { xpoint: 150, ypoint: 100 }, { xpoint: 50, ypoint: 0 }, ]; var points = [ { xpoint: 0, ypoint: 0 }, { xpoint: 100, ypoint: 100 }, { xpoint: 125, ypoint: 125 }, { xpoint: 150, ypoint: 175 }, { xpoint: 190, ypoint: 175 }, { xpoint: 150, ypoint: 100 }, { xpoint: 50, ypoint: 0 }, ]; var Gen = d3.area() .x((p) => p.xpoint) .y0((p) => 0) .y1((p) => p.ypoint); d3.select("#gfg") .append("path") .attr("d", Gen(points)) .attr("fill", "green") .attr("stroke", "black"); svg { border: 1px solid red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg id="gfg" width="200" height="200"></svg>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta