かなりホバー効果（D3チャート）

Question

さてさて、私はこのチャート上のCSSの効果をエミュレートしようとしている：

http://bl.ocks.org/bobmonteverde/2070069

あなたはポイントの上にカーソルを置く、それがポイントの周りに大きな円を作成します。 https://jsfiddle.net/y3LpjLph/3/

CSS：

/* Line Chart CSS */ 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    stroke-width: 3px; 
    shape-rendering: crispEdges; 
} 

#pipeline-1, 
#pipeline-2 { 
    fill: none; 
    stroke-width: 1.5px; 
    stroke-linecap: round; 

    transition: stroke-width 250ms linear; 
    -moz-transition: stroke-width 250ms linear; 
    -webkit-transition: stroke-width 250ms linear; 

    transition-delay: 250ms 
    -moz-transition-delay: 250ms; 
    -webkit-transition-delay: 250ms; 
} 

.x.axis path { 
/* Uncomment below if I want to remove x-axis line */ 
/* display: none;*/ 
} 

    stroke-opacity: 0; 
    fill-opacity: 0; 

#pipeline-chart-render { 
    padding-left: -50px; 
} 

.area { 
    fill: gray; 
    opacity: 0.2; 
} 

.legend-items text { 
    fill: steelblue; 
} 

.legend { 
    fill: white; 
    text-decoration-color: blue; 
} 
/* Simple tooltip CSS */ 


div.tooltip { 
    position: absolute; 
    background-color: rgba(255,255,255,1); 
    padding: 10px; 
    border: 1px solid #ddd; 

    font-family: Arial; 
    font-size: 13px; 
    font-weight: bold; 
    color: #7c795d; 


    transition: opacity 500ms linear; 
    -moz-transition: opacity 500ms linear; 
    -webkit-transition: opacity 500ms linear; 

    transition-delay: 500ms 
    -moz-transition-delay: 500ms; 
    -webkit-transition-delay: 500ms; 

    -moz-box-shadow: 4px 4px 12px rgba(0,0,0,.5); 
    -webkit-box-shadow: 4px 4px 12px rgba(0,0,0,.5); 
    box-shadow: 4px 4px 12px rgba(0,0,0,.5); 

    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 

.noPointers{ 
    pointer-events:none; 
} 

.pipelinePoint .circlePoint.active { 
    fill: orangered; 
    fill-opacity: 1; 
    stroke-width: 25px; 
    stroke-opacity: .5; 
} 

.pipelinePoint { 
    stroke-opacity: 1; 
    fill-opacity: 0.5; 
} 

.pipelinePoint .circlePoint { 
    transition: stroke-width 250ms linear; 
    -moz-transition: stroke-width 250ms linear; 
    -webkit-transition: stroke-width 250ms linear; 
} 

/*.pipelinePoint .circlePoint.hover { 
    fill: blue; 
}*/ 

.circlePoint { 
    fill-opacity: 0.5; 
    transition: stroke-width 250ms linear; 
    -moz-transition: stroke-width 250ms linear; 
    -webkit-transition: stroke-width 250ms linear; 
} 

.point-paths path { 
    /* 
    fill: #eee; 
    stroke: #aaa; 
    */ 
    stroke-opacity: 0; 
    fill-opacity: 0; 
} 

Answer 1

あなた」私の人生のために

、私は私自身のCSS :)

私のフィドルに欠けているかを把握することはできませんあなたのサークルを満たしていますが、ストロークカラーはありません。

.pipelinePoint .circlePoint.active { 
    fill: orangered; 
    stroke: orangered; 
    fill-opacity: 1; 
    stroke-width: 25px; 
    stroke-opacity: .5; 
} 

がfiddleを更新：だから、あなたのCSSアニメーションが実行されている、参照するだけでは何もありません。