使用 javascript 从 json 数据中绘制 SVG

Question

如何根据返回的json数据在SVG中绘制上下文图？

示例 json 数据：

 "data":{
         "PageType":"Home",
         "CatId":0,
         "Category":"",
         "ObjectId":0,
         "Object":"",
         "Total":1,
         "Prev":[
            {
               "type":"Prev1",
               "Count":1,
               "Time":0
            },
             {
               "type":"Prev2",
               "Count":2,
               "Time":0
            },
             {
               "type":"Prev3",
               "Count":3,
               "Time":0
            },
         ],
         "Next":[
            {
               "type":"Next1",
               "Count":1,
               "Time":1000
            }
              {
               "type":"Next2",
               "Count":2,
               "Time":1000
            },
              {
               "type":"Next3",
               "Count":3,
               "Time":1000
            }
         ]
      }
      

Answer 1

好的，这不是问题，这只是实施练习。我没有给你结果，只是一些指示。这些是 SVG 的基本元素。 <g> 是对元素进行分组，可以使用 transform 属性来移动。

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <style>
    line, rect {stroke-width: 1; stroke: navy; fill: none;}
    text {fill: navy;}
  </style>
  <g transform="translate(200 150)">
    <rect x="-50" y="-20" width="100" height="40" rx="10" />
    <text dominant-baseline="middle" text-anchor="middle" width="100">Text 1</text>
    <line x1="50" y1="0" x2="100" y2="60" /> 
  </g>
</svg>

那么它需要是动态的。您知道每个元素的大小和间距。使用forEach() 循环，您可以遍历列表中的所有元素并将它们“展开”。我只是用...innerHTML += ...“附加”新的SVG元素

var prev = {
  "Prev": [{
      "type": "Prev1",
      "Count": 1,
      "Time": 0
    },
    {
      "type": "Prev2",
      "Count": 2,
      "Time": 0
    },
    {
      "type": "Prev3",
      "Count": 3,
      "Time": 0
    },
  ]
};

var drawing = document.getElementById('drawing');

prev.Prev.forEach((p, i, arr) => {
  let x = 55;
  let y = 250/arr.length*i+50;
  drawing.innerHTML += `<g transform="translate(${x} ${y})">
        <rect x="-50" y="-20" width="100" height="40" rx="10" />
        <text dominant-baseline="middle" text-anchor="middle" width="100">${p.type}</text>
        <line x1="50" y1="0" x2="100" y2="${250/arr.length-y+50}" /> 
      </g>`;
});

<svg id="drawing" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <style>
    line, rect {stroke-width: 1; stroke: navy; fill: none;}
    text {fill: navy;}
  </style>
</svg>

这对于自己实现整个事情应该没问题:-)