D3.JS를 사용하여 JS 객체의 'value'에 액세스하십시오.

Question

D3.js로 작업 중이며 버튼을 클릭 할 때 내림차순/내림차순으로 내 바를 정렬하려고합니다. 그러나 sortBars 함수가 내 개체에서 올바른 값을 반환하는 데 문제가 있습니다. 이 엑스 스케일 (I)를 반환하면

var sortOrder = false; 
var sortBars = function() { 
sortOrder = !sortOrder; 
svg.selectAll("rect") 
    .sort(function(a, b) { 
     if (sortOrder) { 
      return d3.ascending(a, b); 
     } else { 
      return d3.descending(a, b); 
     } 
    }) 
    .transition() 
    .delay(function(d, i) { 
     return i * 50; 
    }) 
    .duration(1000) 
    .attr("x", function(d, i) { 
     return xScale(i); 
    }); 
}; 

, 나는 그것이 적절하게 내 데이터 집합을 참조하지 압니다. 나는 그것을 i.value으로 배치하려고 시도했다. (이것은 내 데이터 세트에서와 같이 이름 붙여진 것이다.) 나는 이것이 정확하지 않다는 것을 안다. 그러나 내가 그것을 바꿀 때, 나는 최소한 바가 움직 이도록한다. 올바른 데이터에 어떻게 액세스합니까?

나는 이것을 위해 JSFiddle을 개발했습니다. 부담없이 놀아 라. 현재 Sort 버튼은 효과가 없습니다 (함수가 데이터에 올바르게 액세스하지 못함).

비교기 기능은 긍정적, 부정적 제로 반환해야합니다 :

Answer 1

코드는 두 세부가 거의 좋았다. 코드에서 값이 아닌 데이터 항목을 비교합니다.

function sortItems(a, b) { 
    if (sortOrder) { return a.value - b.value; } 
    return b.value - a.value; 
} 

svg.selectAll('rect') 
.sort(sortItems) 
// update the attributes 

sortBars 메서드가 작동하지 않았습니다. 그것이 작동 난 당신 jsFiddle를 포크와 수 있도록 적응

// Bind the event 'onclick' to the sortBars functions 
d3.select('#sort').on('click', sortBars); 

: http://jsfiddle.net/pnavarrc/3HL4a/4/

참조

• https://github.com/mbostock/d3/wiki/Selections#wiki-sort

Answer 2

내가 생각 나는 이벤트 사용 D3를 결합하는 것을 선호 너는 아주 가깝다. xscale은 i를 사용해야합니다 - 여기서 d에있는 데이텀이 아닌 목록에서 데이텀의 위치입니다. 그러나 당신의 정렬은 값이 아닌 데이터 객체를 정렬하려고합니다. 이것을 시도하십시오 :

.sort(function(a, b) { 
    if (sortOrder) { 
     return d3.ascending(a.value, b.value); 
    } else { 
     return d3.descending(a.value, b.value); 
    } 
}) 

나는 두 개의 객체로 어느 것이 더 큰지 알 수 없습니다. 오름차순 및 내림차순 함수는 접근자를 사용하지 않습니다.