Question

以下是构建正方形网格的一些d3.js：

for (i = 0; i < N; i++){
    for (j = 0; j < N; j++){
        d3.select("#board")
        .append("rect")
        .attr("x", 10 + 60*i)
        .attr("y", 10 + 60*j)
        .attr("width", 50)
        .attr("height",50); 
    }
}

如何直接使用<rect>绘制svg元素？

Answer 1

你的意思是没有d3？使用DOM，就像这样...

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", 10);
...

或作为标记

<rect x="<some number>" y="<some other number>" .../>

Answer 2

如果您需要大量相同的对象，可以使用<use>标记创建<defs>部分中提到的对象的副本。这样您就不必重复所有演示文稿属性（width，height，fill等。）

＆＃13;

<svg viewBow="0 0 400 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="square" width="40" height="40" fill="#ff0" stroke="#f60" stroke-width="5" />
  </defs>
  <!-- Create as many rectangles as you need: -->
  <use x="5" y="5" xlink:href="#square" />
  <use x="55" y="5" xlink:href="#square" />
  <use x="105" y="5" xlink:href="#square" />
  <use x="155" y="5" xlink:href="#square" />
  <use x="205" y="5" xlink:href="#square" />
  <use x="255" y="5" xlink:href="#square" />
  <use x="305" y="5" xlink:href="#square" />
  <use x="355" y="5" xlink:href="#square" />
  <use x="5" y="55" xlink:href="#square" />
  <use x="55" y="55" xlink:href="#square" />
  <use x="105" y="55" xlink:href="#square" />
  <use x="155" y="55" xlink:href="#square" />
  <use x="205" y="55" xlink:href="#square" />
  <use x="255" y="55" xlink:href="#square" />
  <use x="305" y="55" xlink:href="#square" />
  <use x="455" y="55" xlink:href="#square" />
</svg>

＆＃13;

没有d3.js的矩形数组

2 个答案: