search

Tebaeleven / svg_blocks

https://tebaeleven.github.io/svg_blocks/src/v3_class/
0 stars 0 forks source link

Blockクラスのオブジェクトを生成した際、最初のオブジェクトのみpathが生成されない #15

Closed Tebaeleven closed 1 year ago

Tebaeleven commented 1 year ago

状況

image

blocks.push(
    // new Block(0, 0, 75, 60, "#e74c3c", "red", "He"),
    new Block(200, 0, 110, 60, "#5252ff", "blue", "gives"),
    new Block(200, 0, 110, 60, "#5252ff", "blue", "gives"),

なぜか最初に生成したブロックのpathのdコマンドが生成されていない

Tebaeleven commented 1 year ago

原因

let svg = d3.select("#block-path")

d3.selectが正しく動いていなかった。

対処

        let svg = this.element.getElementById("block-path")
        svg.setAttribute("d", path)
        svg.setAttribute("fill", "#e74c3c")
        svg.setAttribute("stroke", "red")
        svg.setAttribute("stroke-width", "5")

this.elementを参照するようにし、なるべく予想外の結果を出さないように標準のgetElementByIdを使って指定した。

Tebaeleven commented 1 year ago

修正後

image