범례 마우스 오버를 기준으로 불투명도를 변경하는 경로 선택

Question

기본적으로 선택 문제입니다.

여기 내 semi-working Plunker입니다.

경로 범례의 차트 요소 (원)에 마우스를 올리면 차트 내의 모든 경로의 불투명도가 이 아닌으로 변경됩니다.

나는 mouseover에서 활성화 된 원과 동일한 ID를 가질 경로의 ID를 설정했습니다. 또한 불투명도를 변경하기 위해 마우스를 올리면 선택되지 않은 서클을 얻었습니다. (그러나 현재 모든 차트에서 모든 범례에있는 선택되지 않은 모든 서클이 불투명도를 변경합니다. 마우스 오버 투명도 변경은 관련 차트만으로 제한하려고합니다.)

달성하려고하는 것 :
주어진 차트의 범례에서 원을 마우스로 움직이면 경로 자체에 마우스 포인터를 대고있는 것처럼 동일한 불투명도 변경이 해당 차트의 경로에 적용되어야합니다. 문제가 올바르게 이해되면 서클 및 해당 경로의 선택/선택 취소를 정의하는 데 문제가 있으며 해당 선택 사항을 페이지의 여러 차트 중 하나의 차트로만 제한합니다. 여기

이 경로 '그룹과 ID를 정의하는 방법은 다음과 같습니다

var pathGroup = main.append('g').classed('paths', true); 
    var paths = pathGroup.selectAll("path") 
    .data(dataset) 
    .enter() 
    .append("path") 
    .attr("id", function(d) { 
     return d.record 
    })  
    .attr("data-legend", function(d) { 
     return d.record 
    }) 

그리고 여기에 문제가있는 코드입니다, 내 생각 :

여기

li.selectAll("circle") 
    .attr("id",function (d) {return d.key})   
    .style("fill",function(d) { return d.value.color}) 
     .on("mouseover", function(d) { 
    // need to define "circleGroup" and "circles" (as is done for "pathGroup" and "paths") so that the legend's non-selected circles are the ones that fade) 
    // also need to find a way of limiting "circles" to a circle group within only that state's chart 
    //   circles 
      d3.selectAll('circle:not(this)') 
      .style('opacity', 0.4) 
      .style('transition', "opacity 0.1s") 
     d3.select(this) 
      .classed('hover', true) 
      .style('opacity', 0.9) 
      .style('transition', "opacity 0.1s") 

    d3.select('path:not(this)') 
    .style('opacity', 0.4) 
    .style('transition', "opacity 0.1s") 
    //  d3.select('path data-legend', function(d) { return d.key}) 
    d3.select('path id', function(d) { return d.key}) 
    .classed('hover', true) 
    .style('opacity', 0.9) 
    .style('transition', "opacity 0.1s")    
    }) 
     .on('mouseout', function(d) { 
     d3.selectAll('circle') 
      .style('opacity', 0.9) 
      .style('transition', "opacity 0.1s") 
     })   

다시 내 반 작업 Plunker입니다 : http://plnkr.co/edit/mvdqBPMymCt9VAKAPKD1?p=preview

미리 권한을 설정해 주셔서 감사합니다. 코드와

Answer 1

문제 :

d3.selectAll ('원') 은 신체의 모든 원을 선택하고 지금까지의 경로에 관한 한 :

d3.select을 ('경로 ID') 선택기 자체가 여기 엉망으로 작동하지 않을 것이다. 여기서 콘솔 로깅을 시도하십시오.

옵션 1 :

는 다음 코드로 전설의 마우스 이벤트를 교체하십시오 :

.on("mouseover", function(d) { 
    // look for all the circles within the parent node 
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.4); 

    // change opacity of current circle 
    d3.select(this).style('opacity', 0.9); 

    // use parentNode to go until SVG and select all paths 
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path').style('opacity', 0.4); 

    // change opacity of path with data-legend = key 
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path[data-legend="'+d.key+'"]').style('opacity', 0.9); 
}) 
.on('mouseout', function(d) { 
    // change all circles' and paths' opacity back to original values 
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.9); 
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path').style('opacity', 0.9); 
}); 

내가 코멘트 코드를 이해하기 충분히 명확 바랍니다. parentNodes를 통해 구문 분석 만하면됩니다.

옵션 2 :

등

을 "상태"즉, 알라바마, 캘리포니아를 대표하는 전설의 그룹에 클래스/ID를 추가하고 모든 마우스 오버에 selectedState와 SVG를 검색 및 변경 경로의 불투명도.

희망이 도움이됩니다.:)