javascript - 图表的值

Question

我有一个由 SVG 编码组成的五边形图。所以我用这样的代码制作了五边形:

 <svg><path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0"></svg>

现在，从图形 Angular 来看，五边形每条边的值均为 30。我正在尝试找到一种方法来更改这些值，而不必总是进入 PATH CS 来更改度数值。

任何人都有一个想法，我一直在查找它并发现将其与 javascript 连接将是最好的情况，但我不知道如何编写正确的 javascript。有人可以帮忙吗？

Answer 1

我不确定它是否能回答您的问题。我不明白什么是 cs 属性，也不明白您真正想要修改的内容。

但是，这里有一种通过 javascript 访问所有多边形点的方法(可能不是最好的):

您可以将所有d点设置为数组的数组，然后通过修改它来访问每个点

var p = document.querySelector('path');

var a = [
  [ ["M"],[0.5, -62.5] ],
  [ ["L"],[60.5, -18.5] ],
  [ ["L"],[37.5, 51.5] ],
  [ ["L"],[-36.5, 51.5] ],
  [ ["L"],[-59.5, -18.5] ],
  [ ["L"],[0.5, -62.5] ],
  [ ["M"],[0, 0] ],
  [ ["L"],[0, 0] ]
];


function draw() {
    //loop through the array to join path descriptions with their values
    var d = function(){var r = '';for (var i = 0; i < a.length; i++) r += a[i].join('') + " "; return r;};
    p.setAttribute('d', d());
  }

//EXAMPLes
  //Change each value manually then redraw
p.addEventListener('click', function() {
  a[1][1][0] ++;
  a[2][1][1] --;
  draw();
}, false);

  //a simple function to change values of set points
function move(point, xy, newValue) {
  a[point][1][xy] = newValue;
  draw();
}
window.onclick = function() {
  move(2, 0, 75);
};

<svg>
  <path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0">
</svg>

如果您不改变多边形的结构(点数)，那么您可以使用更简单的结构:

var p = document.querySelector('path');

    var a = [
      [0.5, -62.5],
      [60.5, -18.5],
      [37.5, 51.5],
      [-36.5, 51.5],
      [-59.5, -18.5],
      [0.5, -62.5],
      [0, 0],
      [0, 0]
    ];

    function draw() {
      //HardWrite the path descriptions
      p.setAttribute('d', "M" + a[0] + " " + "L" + a[1] + " " + "L" + a[2] + " " + "L" + a[3] + " " + "L" + a[4] + " " + "L" + a[5] + " " + "M" + a[6] + " " + "L" + a[7]);
    }

     //Change each value manually then redraw
    p.addEventListener('click', function() {
      a[1][0] ++;
      draw();
    }, false);

     //a simple function to change values of set points
    function move(point, xy, newValue) {
      a[point][xy] = newValue;
      draw();
    }
    window.onclick = function(){ move(2, 0, 75);};

<svg>
  <path cs="100,100" d="M0.5,-62.5 L60.5,-18.5 L37.5,51.5 L-36.5,51.5 L-59.5,-18.5 L0.5,-62.5 M0,0 L0,0">
</svg>