当我切换线时，将箭头的颜色更改为与 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)