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）

切换线时，将箭头的颜色更改为与D3中的线相同

1 个答案: