Вопросы Теги

Функция визуализации Javascript Template возвращает неопределенный

-Dmaven.wagon.http.ssl.insecure=true -Dmaven.wagon.http.ssl.allowall=true

Он используется для перехода к проверке сертификата.

0
задан Harsh Patel 16 January 2019 в 12:23
поделиться

1 ответ

Вы не можете вкладывать литералы шаблонов друг в друга, так как обратные метки будут мешать друг другу. Лучше всего абстрагировать d.g.map((entry)=> { ... }) в отдельную функцию, а затем вызвать эту функцию внутри литерала шаблона.

Кроме того, в вашей функции render() вы не возвращаете объединенный массив. Он вернет undefined, и ваши круги никогда не будут добавлены в ваш HTML. Следующий скрипт должен работать: 

document.getElementById("gElement").innerHTML = getParsedHtml(d);

    function getParsedHtml(data) {
      return data.g.map(entry => {
        return `
              <g class="${entry.class}" id="${entry.id}">

              <polygon 
                 points ="${entry.polygon.points}">
              </polygon>

              ${render(entry.circle)}

              </g>`;
       }).join('');
    }

    function render(circ) {
      return circ.map(entry => {
        return `
          <circle
              cx="${entry.cx}"
              cy="${entry.cy}"
              r="${entry.r}"
              fill="${entry.fill}">
          </circle>`;
      }).join('');
    }

Я заметил, что у вас есть префикс $ в атрибуте points многоугольника: я полагаю, что это опечатка?

См. Доказательство -принятие примера ниже: 

const d = {
  "id": "gElement",
  "g": [{
    "class": "polygon",
    "id": "elements100",
    "polygon": {
      "points": "337,212.00000000000006,352.99999999999994,150,433.99999999999994,147.00000000000006,431,206.00000000000006"
    },
    "circle": [{
        "cx": "337",
        "cy": "212.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "352.99999999999994",
        "cy": "150",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "433.99999999999994",
        "cy": "147.00000000000006",
        "r": "2",
        "fill": "none"
      },
      {
        "cx": "431",
        "cy": "206.00000000000006",
        "r": "2",
        "fill": "none"
      }
    ]
  }]
};

document.getElementById("gElement").innerHTML = getParsedHtml(d);

function getParsedHtml(data) {
  return data.g.map(entry => {
    return `
          <g class="${entry.class}" id="${entry.id}">

          <polygon 
             points ="${entry.polygon.points}">
          </polygon>

          ${render(entry.circle)}

          </g>`;
   }).join('');
}

function render(circ) {
  return circ.map(entry => {
    return `
      <circle
          cx="${entry.cx}"
          cy="${entry.cy}"
          r="${entry.r}"
          fill="${entry.fill}">
      </circle>`;
  }).join('');
}
svg {
  border: 1px solid #000;
  width: 250px;
  height: 250px;
}

polygon {
  fill: grey;
}
circle {
  fill: steelblue;
}
<svg viewBox="0 0 500 500">
  <g id="gElement"></g>
</svg>

0
ответ дан poirot 16 January 2019 в 12:23
поделиться
Другие вопросы по тегам:

Похожие вопросы: