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.