1

soy principiante en el uso de d3.js (y también en web) y estoy intentando graficar una grilla a medida. Si lo hago directamente desde HTML5 no tengo ningún inconveniente, y el resultado que busco es el siguiente:

<div style="width:1002px;height:502px">
		<svg id="svg" width="100%" height="100%">
			<defs>
				<pattern id="smallGrid" width="5" height="5" patternUnits="userSpaceOnUse">
					<path d="M 5 0 L 0 0 0 5" fill="none" stroke="gray" stroke-width="0.4"/>
				</pattern>
				<pattern id="mediumGrid" width="25" height="25" patternUnits="userSpaceOnUse">
					<path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="1"/>
					<rect width="25" height="25" fill="url(#smallGrid)"/>
				</pattern>
				<pattern id="grid" width="125" height="125" patternUnits="userSpaceOnUse">
					<rect width="125" height="125" fill="url(#mediumGrid)"/>
					<path d="M 125 0 L 0 0 0 125" fill="none" stroke="gray" stroke-width="2.5"/>
				</pattern>
			</defs>

			<rect width="100%" height="100%" fill="url(#grid)" />
		</svg>
	</div>

El problema lo tengo cuando intento traducir este fragmento a código javascript usando d3.js. El código que escribí es el siguiente:

var container= d3.select('#container')
			.attr('class','cont')
			.style('width', 1001 + 'px')
			.style('height', 501 + 'px');

	var svg= d3.select('#container')
			.append('svg')
			.attr('id','svg')
			.attr('width','100%')
			.attr('height','100%')
			.append('g');

	var defs= svg.append('defs');
			defs.append('pattern')
					.attr('id','smallGrid')
					.attr('width',5)
					.attr('height',5)
					.attr('patternUnits','userSpaceOnUse')
					.append('path')
					.attr('fill','none')
					.attr('stroke','gray')
				  .attr('stroke-width',0.4)
					.attr('d','M 5 0 L 0 0 0 5');

			defs.append('pattern')
					.attr('id','mediumGrid')
					.attr('width',25)
					.attr('height',25)
					.attr('patternUnits','userSpaceOnUse')
					.append('rect')
					.attr('width',25)
					.attr('height',25)
					.attr('fill','url(#smallGrid)')
					.append('path')
					.attr('fill','none')
					.attr('stroke','gray')
					.attr('stroke-width',1)
					.attr('d','M 25 0 L 0 0 0 25');

				defs.append('pattern')
						.attr('id','grid')
						.attr('width',125)
						.attr('height',125)
						.attr('patternUnits','userSpaceOnUse')
						.append('rect')
						.attr('width',125)
						.attr('height',125)
						.attr('fill','url(#mediumGrid)')
						.append('path')
						.attr('fill','none')
						.attr('stroke','gray')
						.attr('stroke-width',2.5)
						.attr('d','M 125 0 L 0 0 0 125');

				svg.append('rect')
						.attr('x', 0)
						.attr('y', 0)
						.attr('width','100%')
						.attr('height','100%')
						.attr('fill','url(#grid)');
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="container"></div>

Como se puede observar en este último resultado, solo puedo observar el patrón con los cuadros más pequeños, pero no puedo lograr que se puedan visualizar los cuadros más grandes y con distintos espesores de línea como en el primer caso (solo HTML5). Si alguien me puede indicar el error se lo agradezco.

1 respuesta 1

2

Acabo de encontrar el error !! (Error de principiante) publico la solución por si a alguna persona le hace falta:

var container= d3.select('#container')
			.attr('class','cont')
			.style('width', 1001 + 'px')
			.style('height', 501 + 'px');

	var svg= d3.select('#container')
			.append('svg')
			.attr('id','svg')
			.attr('width','100%')
			.attr('height','100%')
			.append('g');

	var defs= svg.append('defs');
			var pattern1= defs.append('pattern')
                        .attr('id','smallGrid')
                        .attr('width',5)
                        .attr('height',5)
                        .attr('patternUnits','userSpaceOnUse');
                pattern1.append('path')
                        .attr('fill','none')
                        .attr('stroke','gray')
                        .attr('stroke-width',0.4)
                        .attr('d','M 5 0 L 0 0 0 5');

			var pattern2= defs.append('pattern')
                        .attr('id','mediumGrid')
                        .attr('width',25)
                        .attr('height',25)
                        .attr('patternUnits','userSpaceOnUse');
                pattern2.append('rect')
                        .attr('width',25)
                        .attr('height',25)
                        .attr('fill','url(#smallGrid)');
                pattern2.append('path')
                        .attr('fill','none')
                        .attr('stroke','gray')
                        .attr('stroke-width',1)
                        .attr('d','M 25 0 L 0 0 0 25');

				var pattern3= defs.append('pattern')
                          .attr('id','grid')
                          .attr('width',125)
                          .attr('height',125)
                          .attr('patternUnits','userSpaceOnUse');
                  pattern3.append('rect')
                          .attr('width',125)
                          .attr('height',125)
                          .attr('fill','url(#mediumGrid)');
                  pattern3.append('path')
                          .attr('fill','none')
                          .attr('stroke','gray')
                          .attr('stroke-width',2.5)
                          .attr('d','M 125 0 L 0 0 0 125');

				svg.append('rect')
						.attr('x', 0)
						.attr('y', 0)
						.attr('width','100%')
						.attr('height','100%')
						.attr('fill','url(#grid)');
<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="container"></div>

No estaba anidando correctamente, ya que estaba agregando elementos siempre sobre "defs" y no estaba incluyendo elementos dentro de cada "pattern". Es por ello que hay que separar cada pattern en variables diferentes para incrustarle los elementos correspondientes a cada uno de ellos (path y rect). Espero que se entienda esta aclaración.

3
  • 2
    Y cual era ese error?, si no lo explicas tu aporte se queda a medias pues no queda claro lo que estaba mal y menos como lo corregiste
    – user128299
    Commented el 8 ago. 2019 a las 22:17
  • No estaba anidando correctamente. Estaba agregando todo sobre "defs" y por lo tanto no estaba anidando correctamente el path y el rect para cada uno de los patrones. Es por eso que tuve que separar cada uno de los patrones en variables diferentes para poder agregar correctamente los elementos que debe contener.
    – Lucas
    Commented el 8 ago. 2019 a las 22:37
  • 1
    La explicación va en tu respuesta, edítala por favor y agrega ahí
    – user128299
    Commented el 8 ago. 2019 a las 22:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.