d3 svg.selectAll (".foo"). 스타일 ("채우기", ...) 재정의 .foo : hover CSS 규칙

Question

색상 화 알고리즘에 따라 초기 fill 속성 값을 할당하는 d3 choropleth를 만들고 있습니다. 의 조율 :

svg.selectAll(".foo") 
     .style("fill", function(d){ 
     return colorization(getRandomArbitrary(5,25)); //returns hex value 
     }) 

이것은 작동합니다. 불행히도, 내 CSS 규칙을 무의미하게 렌더링하는 것 같습니다. 규칙은 D3를 통해 .style()에 전화를하지 않고 작동합니다

.foo:hover{ 
    fill: white; 
    } 

나는이하고있다 d3.js 뭔가, 또는 SVG 스타일과 CSS 스타일 사이의 상호 작용의 어떤 종류의 결과입니다 있는지 확실하지 않습니다.

알고리즘 색상 화를 수행하고 : 호버 채우기 효과를 계속 허용하는 솔루션을 찾고 있습니다.

Answer 1

이것은 CSS의 예상되는 동작이며 SVG 또는 D3에만 고유하지 않습니다. 인라인 스타일은 :hover 스타일보다 우선합니다. !important을 사용하여 재정의 할 수 있습니다. @Alexander O'Mara

.foo:hover { 
    fill: white !important; 
} 

Answer 2

... 알고리즘의 컬러화를 수행 솔루션을 찾고의 대답은 당신이 당신이 말했다 이후, 그러나, 우수 '...', 난 그냥 가져다하려는 주의 다른, 다른, 접근.

명시 적, programmaticaly,이 라인 호버 효과를 설정할 수 있습니다

svg.selectAll(".foo") 
    .style("fill", function(d){ 
     return colorization(getRandomArbitrary(5,25)); //returns hex value 
    }) 
    .on("mouseover", function() { d3.select(this).style("fill", "white") }) 
    .on("mouseout", function() { function(d){ 
     return colorization(getRandomArbitrary(5,25)); 
    }) 

당신이 CSS 파일에서 아무것도하지 않아도 그 방법 - 그래서 '덮어 쓰기'할 것도 없다. :)

불행하게도, 위의 코드에서와 같이 이벤트 핸들러를 사용해야하는 "hover"스타일을 CSS에서 인라인 스타일로 직접 변환 할 수 없습니다!

이 문제의 해결책은 this question입니다.