Pretty etkisi hover (D3 grafik)

Question

Tamam, ben bu grafik üzerinde CSS etkisini taklit çalışıyorum:

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

Bir noktada üzerinde gezdirin, bu nokta etrafında daha büyük bir çember oluşturur. 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

Sen' Beni hayat için

, ben kendi CSS :)

benim Fiddle eksik ettiğimi bilemiyorum ve çevrelerinizi doldurdu, ancak kontur rengi yok.

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

fiddle Güncelleme: Yani, sizin css animasyon çalışan, görmek için sadece bir şey yok.