Изменить цвет стрелки так же, как линии в D3, когда я переключаю линии

Question

Я создаю линию (путь), которая меняет цвет при нажатии.Чтобы изменить цвет, я добавляю class.Это действие также будет действовать как переключение класса с одного пути (строки) на другой.

Ниже приведен мой рабочий код.

public drawLines() {
    this._containerSvg.append( 'line:defs' ).append( 'line:marker' )
        .attr( 'id', 'triangle' )
        .attr( 'refX', 6 )
        .attr( 'refY', 6 )
        .attr( 'markerWidth', 30 )
        .attr( 'markerHeight', 30 )
        .attr( 'markerUnits', 'userSpaceOnUse' )
        .attr( 'orient', 'auto' )
        .append( 'path' )
        .attr( 'd', 'M 0 0 12 6 0 12 3 6' )
        .style( 'fill', 'black' );

    this._containerSvg.selectAll( 'line' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id
        } )
        .enter()
        .append( 'line' )
        .attr( 'id', ( line : Line ) => line.id )
        .attr( 'x1', ( line : Line ) => line.x1 )
        .attr( 'y1', ( line : Line ) => line.y1 )
        .attr( 'x2', ( line : Line ) => line.x2 )
        .attr( 'y2', ( line : Line ) => line.y2 )
        .style( 'stroke', 'black' )
        .style( 'stroke-width', '4px' )
        .style( 'cursor', 'pointer' )
        .attr( 'marker-end', 'url(#triangle)' )
        .on( 'click', ( line ) => {
            this._selectedLine = line;
            this.updateLines();
        } );
}

updateLines() {
    this._containerSvg.selectAll( 'line' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id;
        } )
        .attr( 'x1', ( line : Line ) => line.x1 )
        .attr( 'y1', ( line : Line ) => line.y1 )
        .attr( 'x2', ( line : Line ) => line.x2 )
        .attr( 'y2', ( line : Line ) => line.y2 )
        .attr( 'class', ( line : Line ) => this._selectedLine === line ? 'selected' : '' )
}

Файл CSS.

svg line.selected {
   stroke: green !important;
}

Когда линия выделена, она меняет цвет на зеленый, а не на стрелку.Как я могу изменить цвет стрелки, когда линия выделена?

Заранее спасибо.

Answer 1

Хорошо, спасибо за подсказку (несколько: D) @ altocumulus.

Каким-то образом мне удалось получить результаты.Я только что сделал одинаковые id для маркера и линии, и я реализовал ту же концепцию class, которую я реализовал для линии.Ниже приведен мой код.

Немного изменился как мой опубликованный вопрос.

drawLines() {
    this._containerSvg.selectAll( 'defs' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id;
        } )
        .enter()
        .append( 'marker' )
        .attr( 'id', ( line : Line ) => line.id )
        .attr( 'refX', 6 )
        .attr( 'refY', 6 )
        .attr( 'markerWidth', 30 )
        .attr( 'markerHeight', 30 )
        .attr( 'markerUnits', 'userSpaceOnUse' )
        .attr( 'orient', 'auto' )
        .append( 'path' )
        .attr( 'd', 'M 0 0 12 6 0 12 3 6' );

    this._containerSvg.selectAll( 'line' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id;
        } )
        .enter()
        .append( 'line' )
        .attr( 'id', ( line : Line ) => line.id )
        .attr( 'x1', ( line : Line ) => line.x1 )
        .attr( 'y1', ( line : Line ) => line.y1 )
        .attr( 'x2', ( line : Line ) => line.x2 )
        .attr( 'y2', ( line : Line ) => line.y2 )
        .attr( 'end', ( line : Line ) => line.endCircle.circlePosition )
        .attr( 'start', ( line : Line ) => line.startCircle.circlePosition )
        .attr( 'stroke-width', 4 )
        .attr( 'marker-end', ( line : Line ) => 'url(#' + line.id + ')' )
        .style( 'stroke', 'black' )
        .style( 'cursor', 'pointer' )
        .on( 'click', ( line ) => {
            this._selectedLine = line;
            this.updateLines();
            d3.selectAll( 'circle' ).remove();
        } );
}

updateLines() {
    this._containerSvg.selectAll( 'line' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id;
        } )
        .attr( 'x1', ( line : Line ) => line.x1 )
        .attr( 'y1', ( line : Line ) => line.y1 )
        .attr( 'x2', ( line : Line ) => line.x2 )
        .attr( 'y2', ( line : Line ) => line.y2 )
        .attr( 'class', ( line : Line ) => this._selectedLine === line ? 'selected' : '' );

    this._containerSvg.selectAll( 'marker > path' )
        .data( this._connectLines, ( line : Line ) => {
            return line.id;
        } )
        .attr( 'class', ( line : Line ) => this._selectedLine === line ? 'selected' : '' );
}

И в CSS

svg path.selected {
   fill: green !important;
}

Это будет работать.B)