javascript之动态绘制吉他和弦_编程设计

所以我的目标是使用 json 文件绘制这样的吉他和弦，我应该创建的和弦数是 924，所以我无法手动完成。

我有一个逗号分隔的数字数组(查看位置)我绝对没有使用指法(这是你应该使用的手指，基本上它是圆圈顶部的数字)

[ 
  { 
    "id": "404", 
    "name": "Cb", 
    "intervals": "", 
    "positions": [ 
      { 
        "id": "1226", 
        "position": "x,2,4,4,4,2", 
        "fingerings": "13331;12341", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      }, 
      { 
        "id": "1231", 
        "position": "7,9,9,8,7,7", 
        "fingerings": "134211", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      }, 
      { 
        "id": "1251", 
        "position": "7,6,4,4,4,7", 
        "fingerings": "321114", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      }, 
 
      ...

这很有挑战性，因为每个和弦都有多个位置，其中一些在第 5 品或更多品上，所以我应该指出我们正在画的是哪个品，而不是每次都画一整把吉他。

第二个问题是我不知道我应该从哪里开始以及如何正确处理它，我很想用 React 或 Python 实现所有内容，然后生成一堆 img 并在我的应用程序中使用它们，这就是我很舒服。我也在考虑 js 和 css，但实际上我怎样才能编写代码，根据数字在特定位置放置一个圆圈。

我不是在寻找代码，只是在寻找一些我可以开始研究的链接，现在我有点卡住了，如果您需要更多信息，请告诉我。

请您参考如下方法:

这可能不是您期望的答案，因为我对吉他和吉他和弦一无所知。请看一下。

const SVG_NS = 'http://www.w3.org/2000/svg'; 
let json = [ 
  { 
    "id": "404", 
    "name": "Cb", 
    "intervals": "", 
    "positions": [ 
      { 
        "id": "1226", 
        "position": "x,2,4,4,4,2", 
        "fingerings": "13331;12341", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      }, 
      { 
        "id": "1231", 
        "position": "7,9,9,8,7,7", 
        "fingerings": "134211", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      }, 
      { 
        "id": "1251", 
        "position": "7,6,4,4,4,7", 
        "fingerings": "321114", 
        "picture": "", 
        "chord_id": "404", 
        "instrument_id": "1" 
      } 
      ] 
   } 
] 
 
for(let j = 0; j < json[0].positions.length; j++){ 
let position = json[0].positions[j].position.replace("x","").split(","); 
let min = Math.min.apply(null, position); 
let displacement = min < 1 ? 1 : min; 
let svg = drawSVGElement("svg", {viewBox:"0 0 70 60"}, wrap); 
drawGrid(); 
 
for(let i = 0; i < position.length; i++ ){ 
if(parseInt(position[i]) > 0){ 
 
let cp = {// circle position 
  x : 10 + parseInt(i) * 10, 
  y : 15 + (position[i] - displacement)*10 
} 
drawSVGElement("circle",{cx:cp.x,cy:cp.y,r:4}, svg) 
} 
} 
 
 
 
 
function drawGrid(){ 
  let d = ""; 
  for(let i = 1; i < 6; i++){ 
    d+=`M10,${i*10}H60` 
  }  
  for(let i = 1; i < 7; i++){ 
    d+=`M${i*10},10V50` 
  } 
  let path = drawSVGElement("path",{"d": d}, svg); 
} 
 
function drawSVGElement(tag, o, parent) { 
  var svgElement = document.createElementNS(SVG_NS, tag); 
  for (let name in o) { 
    if (o.hasOwnProperty(name)) { 
      svgElement.setAttributeNS(null, name, o[name]); 
    } 
  } 
  parent.appendChild(svgElement); 
  return svgElement; 
} 
 
}

svg{border:1px solid; max-height:100vh;} 
path{fill:none;stroke:red;stroke-linecap: round}

<div id="wrap"></div>