使用javascript从json数据绘制SVG [英] Draw SVG from json data using javascript

问题描述

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

How to draw context diagram in SVG base on the returned json data?

示例 json 数据:

Sample json data:

 "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
            }
         ]
      }
      

推荐答案

OK，这不是问题，只是实现练习.我没有给你结果，只是一些提示.这些是 SVG 的基本元素.<g> 对元素进行分组，并且可以使用 transform 属性四处移动.

OK, this is not a problem, it is just implementation exercise. I'm not giving you the result, but just some pointers. These are the basic elements of your SVG. The <g> is grouping the elements and can be moved around with the transform attribute.

<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 += ...

Then it needs to be dynamic. You know the size of each element and the spacing. With a forEach() loop you can loop through all the elements in a list and "spread" them out. I just "append" the new SVG elements with ...innerHTML += ...

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>

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

This should be fine for implementing the entire thing yourself :-)

这篇关于使用javascript从json数据绘制SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！