Передача путей SVG с синтаксисом шаблона в angular - PullRequest
Новая
       4

Передача путей SVG с синтаксисом шаблона в angular

0 голосов
/ 11 января 2020

Я работаю над проектом, в котором я комбинирую angular8 и d3 и столкнулся с некоторыми проблемами, когда попытался передать пути svg в компонент html с помощью привязки шаблона.

И так как я думаю, что это должно быть возможно, я не получаю жалобу по поводу отсутствующей команды moveto ...

Помощь оценена, спасибо:)

html: 

div class="container-fluid">
      <svg [style]="style">
        <g class="arcs">
            <path *ngFor="let arc of arcs" d="arc.path" fill="arc.fill"></path>
        </g>
      </svg>
    </div>

javascript: 

this.arcs = this.data.sort(
      (a, b) =>  Math.abs(a.polarity) - Math.abs(b.polarity)
    ).map(d => {
      return {
        path: areaGen([
          [this.xScale(d3.timeMonth.offset(d.createdAt, -2)), this.yScale(0)],
          [this.xScale(d.createdAt), this.yScale(d.polarity)],
          [this.xScale(d3.timeMonth.offset(d.createdAt, 2)), this.yScale(0)]
        ]),
        fill: this.colors(d.favoriteCount),
        data: d
      }
    })

дуги [0]: 

path: "M42.45491108257615,350C42.45491108257615,350,181.6795182101832,349.99999999999994,251.27399836212564,350C320.84472207707205,349.99999999999994,459.9505470155457,350,459.9505470155457,350L459.9505470155457,350C459.9505470155457,350,320.84472207707205,349.9999999999999,251.27399836212564,350C181.6795182101832,350,42.45491108257615,350,42.45491108257615,350Z"
fill: "#fde725"
data:
  source: "Twitter for iPhone"
  text: "Thank you @GLFOP!"
  createdAt: Wed Oct 30 2019 20:21:54 GMT+0100 (Mitteleuropäische Normalzeit) {}
  retweetCount: 11113
  favoriteCount: 38294
  polarity: 0
__proto__: Object

Console.Error: 

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "arc.path".

1 Ответ

1 голос
/ 11 января 2020

Браузер выдает эту ошибку, поскольку вы передаете arc.path строку в атрибут svg.d, но это должен быть путь с координатами.

Вы должны использовать правильную привязку атрибута для d и fill атрибуты: 

d="arc.path" fill="arc.fill"

             ||
             \/

[attr.d]="arc.path" [attr.fill]="arc.fill"
...