javascript - 动态地将项目插入到 SVG 元素中

Question

我一直在尝试使用 SVG，并希望根据我获得的数据动态地将元素插入到 SVG 元素中。

也就是说，在数据中，我有 2 行，每行有 5 列。
我需要在 SVG 元素(rect、polygon 等)中绘制 10 个 ^(2*5) 项。
例如:# 代表 svg 元素边界。

###########             #######
#1 2 3 4 5#            #12345#
#1 2 3 4 5#           #12345#
###########          #######
  rect               polygon

我可以解决 rect，但是，似乎无法理解如何处理其他形状。

能否请您帮忙解决这个问题。谢谢。

注意:没关系，如果使用一些库可以帮助，请推荐，因为我不知道是否可以使用现有的库。

Here这是一个 fiddle 。下面是在rect中填充元素的代码:

SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="138.64612"
   height="214.38011"
   id="svg4796">
  <defs
     id="defs4798" />
  <metadata
     id="metadata4801">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-132.1123,-309.24939)"
     id="layer1">
    <rect
       class="fill_me"
       width="135.72713"
       height="87.295868"
       x="134.5313"
       y="309.74939"
       id="rect5355"
       style="fill:#040404;fill-opacity:1;stroke:#ffffff;stroke-opacity:1" />
    <polygon
       class="fill_me"
       style="fill:#040404;fill-opacity:1;stroke:#848484;stroke-width:0.75"
       transform="matrix(0.939298,0,0,0.90867846,28.384527,198.27875)"
       id="cat_0000000051"
       points="148.2,240.301 133.1,273.6     110.8,325.334 228.133,357.667 239.899,269 148.2,240.301  " />
  </g>
</svg>

JavaScript:

// Get the required elements, and the attributes for the item to be filled.
var svg = document.querySelectorAll('svg')[0];
var block = svg.getElementsByClassName('fill_me')[0];
var b = {
    width : Math.floor(block.getBBox().width),
    height : Math.floor(block.getBBox().height),
    posX : Math.floor(block.getBoundingClientRect().left),
    posY : Math.floor(block.getBoundingClientRect().top)
};

var drawShape = function (tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var i in attrs)
        el.setAttribute(i, attrs[i]);

    return el;
};

// This will create a group in which the items will be filled.
var grp = drawShape('g');
svg.appendChild(grp);

// this is the data, according to which the block needs to be filled.
var items = ['xava|xav2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|x2a4', 'xvvv|x2v2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xav3|xav4|xav5|xav6|xav7|xav8|x2v9|x2av|x2aa|x2a2|x2a3|x2a4', 'xvvv|xvvv|x2v3|x2v4|x2v5|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|x2v4|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|x2v8|x2v9|x2av|xaaa|xaa2|xaa3|xaa4'];

var rowSize = items[0].split('|').length;   // pick the first one, since all of them have the same length
var colSize = items.length;

var itemSize = {
    width : Math.floor(b.width / rowSize),
    height : Math.floor(b.height / colSize)
};

// For each row!
for (var i = 0; i < colSize; i++) {
    var fil = items[i].split('|');

    // For each column within row
    for (var j = 0; j < fil.length; j++) {
        var draw = drawShape('circle', {
            r: itemSize.width/3,
            cx: b.posX + j * itemSize.width + itemSize.width/2,
            cy: b.posY + i * itemSize.height + itemSize.height/2
        });

        if (j === 0 || fil[j] === 'x2v5' || fil[j] === 'x2v9')
            continue;

        grp.appendChild(draw);
    }
}

Answer 1

根据数据插入SVG元素正是d3js是为。如果你想绘制图表，有很多基于 d3 的库可以让你的生活更轻松。我最喜欢的是dimple但我想我有点偏见......