d3에서 마우스를 가져갈 때 rect/circle을 어둡게합니다.

Question

d3을 사용하여 특정 색상으로 채워지는 여러 개의 사각형과 원을 그립니다.

이제 마우스 포인터를 가리키면 내 개체가 어둡게됩니다. 내 생각은 각 개체를 둘러싸고있는 g 태그에 알파와 검은 색을 넣어 CSS를 사용하는 것이었다 :

g:hover { 
    background-color: rgba(0, 0, 0, .5); 
} 

그러나 그것은 작동하지 않습니다. opacity: .5을 넣을 때 작동하지만 어둡지 않고 가벼워야합니다. 누구는 힌트가 있습니까? 감사합니다.

Answer 1

일반적으로는 :hover 것이 효과적 이었지만, 덧씌우 기하는 자식이 아닌 사각형의 부모 인 g 태그에 적용하는 것은 잘못된 방법이었습니다.

이제 mouseover 이벤트를 rect 태그에 추가하고 fill 속성의 색상 값을 읽어서 더 어두운 값을 계산하여이 문제를 해결했습니다. 아마도 가장 좋은 해결책은 아니지만 나는 다른 생각이 없으며 효과가 있습니다.

.on("mouseover", function() { 
    if((r = $(this).css("fill").match(/(\d+),\s*(\d+),\s*(\d+)/i))) { 
     for(var i = 1; i < 4; i++) { 
      r[i] = Math.round(r[i] * .5); 
     } 
     $(this).attr("fill-old", $(this).css("fill")); 
     $(this).css("fill", 'rgb('+r[1]+','+r[2]+','+r[3]+')'); 
    } 
}) 
.on("mouseout", function() { 
    if($(this).attr("fill-old")) $(this).css("fill", $(this).attr("fill-old")); 
}); 

Answer 2

SVG 요소에 호버 의사를 사용할 수 있다고 생각하지 않습니다. 대신 d3을 사용하여 마우스 오버시 클래스를 추가하고 mouseout에서 클래스를 제거하십시오. 예를 들어

:

svg.append("g") 
    .on("mouseover", function() { 
     d3.select(this).classed("hover", true); 
     }) 
    .on("mouseout", function() { 
     d3.select(this).classed("hover", false); 
    }) 

다음 CSS 데 도움이

g.hover { 
    background-color: rgba(0, 0, 0, .5); 
} 

희망한다.

편집 : 어쩌면 당신은 사용할 수 있습니다 : 호버. 이 질문과 대답 https://stackoverflow.com/a/9210392/2594702을 참조하십시오.

기본적으로 background-color 대신 fill: rgba(0, 0, 0, .5)을 사용합니다.

나는 mouseover와 mouseout을 사용하기 위해 D3을 배웠을 때 독서를 기억한다. 어쩌면 브라우저 지원이 지금만큼 좋지 않았을 수도 있습니다.

Answer 3

D3 vers의 경우. 4 내 도넛 차트에서 나는 같은 문제에 직면했습니다. 나는 here 찾을 수있는 mboostocks 솔루션을 발견했다. 나는 두 번째 예를 들고 "더 밝게"를 "어둡게"로 바 꾸었습니다. 결과 코드 :

.on("mouseover", function(d){ 
    d3.select(this).style("fill", function() { 
     return d3.rgb(d3.select(this).style("fill")).darker(0.2); 
    }); 
});