dc.js - 如何使用.cap（）和.valueAccessor（）？

使用dc.js庫繪製圖表，我需要使用.cap（）方法在使用.valueAccessor（）的餅圖中。dc.js - 如何使用.cap（）和.valueAccessor（）？

相同的圖表：

沒有的.cap（）：它被拉完全正確排序的上.valueAccessor（）
隨着的.cap（）：圖表繪製，而不錯誤在js控制檯中，但它不顯示正確的結果，它似乎是按值排序而不是由valueAccessor排序。

這是一個例子來更好地解釋：

var chartProblems = dc.pieChart('#chart'); 
 
var chartProblems1 = dc.pieChart('#chart1'); 
 

 

 

 
var data = [{ 
 
    Ticket: 0, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 1, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 1, 
 
    Problem: 'bb' 
 
}, { 
 
    Ticket: 1, 
 
    Problem: 'cc' 
 
}, { 
 
    Ticket: 2, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 3, 
 
    Problem: 'bb' 
 
}, { 
 
    Ticket: 3, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 4, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 5, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 6, 
 
    Problem: 'zzz' 
 
}, { 
 
    Ticket: 6, 
 
    Problem: 'bb' 
 
}, { 
 
    Ticket: 7, 
 
    Problem: 'bb' 
 
}, { 
 
    Ticket: 8, 
 
    Problem: 'dd' 
 
}, { 
 
    Ticket: 9, 
 
    Problem: 'ee' 
 
}, { 
 
    Ticket: 9, 
 
    Problem: 'ff' 
 
}, { 
 
    Ticket: 10, 
 
    Problem: 'cc' 
 
}, ]; 
 

 
var ndx = crossfilter(data); 
 
ProblemsDimension = ndx.dimension(function(b) { 
 
    return b.Problem 
 
}); 
 
ProblemGroup = ProblemsDimension.group() 
 
    .reduce(
 
    function(p, d) { 
 

 
     if (d.Ticket in p.Ticket) p.Ticket[d.Ticket] ++; 
 
     else { 
 
     p.Ticket[d.Ticket] = 1; 
 
     p.TicketCount++; 
 
     } 
 
     return p; 
 
    }, 
 

 
    function(p, d) { 
 
     p.Ticket[d.Ticket] --; 
 
     if (p.Ticket[d.Ticket] === 0) { 
 
     delete p.Ticket[d.Ticket]; 
 
     p.TicketCount--; 
 
     } 
 
     return p; 
 
    }, 
 

 
    function() { 
 
     return { 
 
     TicketCount: 0, 
 
     Ticket: {} 
 
     }; 
 
    } 
 
); 
 

 

 
chartProblems 
 
    .width(300) 
 
    .height(300) 
 
    //.margins({ top: 20, left: 10, right: 10, bottom: 20 }) 
 
    .dimension(ProblemsDimension) 
 

 
.group(ProblemGroup) 
 

 
.colors(d3.scale.category20()) 
 
    // assign colors to each value in the x scale domain 
 
    //.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb']) 
 
    .label(function(d) { 
 
    return d.key + ': ' + d.value.TicketCount; 
 
    }) 
 
    // title sets the row text 
 
    .title(function(d) { 
 
    return d.key + ': ' + d.value.TicketCount; 
 
    }) 
 

 
//.elasticX(true) 
 
//.xAxis().ticks(4) 
 
; 
 
chartProblems 
 
    .valueAccessor(function(d) { 
 
    return d.value.TicketCount; 
 
    }) 
 
    .ordering(function(b) { 
 
    return -b.value.TicketCount 
 
    }) 
 
    .cap(2); 
 
chartProblems.render(); 
 

 
chartProblems1 
 
    .width(300) 
 
    .height(300) 
 
    //.margins({ top: 20, left: 10, right: 10, bottom: 20 }) 
 
    .dimension(ProblemsDimension) 
 

 
.group(ProblemGroup) 
 

 
.colors(d3.scale.category20()) 
 
    // assign colors to each value in the x scale domain 
 
    //.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb']) 
 
    .label(function(d) { 
 
    return d.key + ': ' + d.value.TicketCount; 
 
    }) 
 
    // title sets the row text 
 
    .title(function(d) { 
 
    return d.key + ': ' + d.value.TicketCount; 
 
    }) 
 

 
//.elasticX(true) 
 
//.xAxis().ticks(4) 
 
; 
 
chartProblems1 
 
    .valueAccessor(function(d) { 
 
    return d.value.TicketCount; 
 
    }) 
 
    .ordering(function(b) { 
 
    return -b.value.TicketCount 
 
    }) 
 
    //.cap(2) 
 
; 
 
chartProblems1.render();

<script src="http://tvinci.github.io/webs/js/d3.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" rel="stylesheet" /> 
 
<script src="http://tvinci.github.io/webs/js/crossfilter.js"></script> 
 
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script> 
 

 
<body> 
 
    <table> 
 
    <tr> 
 
     <td>With cap 
 
     <br/> 
 
     <div id="chart"></div> 
 
     </td> 
 
     <td>Same chart without cap 
 
     <br/> 
 
     <div id="chart1"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

另外這裏：http://jsfiddle.net/atagliavini/LypsLtot/

我怎樣才能解決這個問題？我忘了什麼嗎？

來源

2015-07-06 Alberto

我希望我解決了您的問題。我將.cap()替換爲.data()，並根據TicketCount對數據進行了排序並預過濾了要呈現的數據。現在你只能得到那些頂部（n）鍵值對你在.data()內提到。修改後的代碼：

.data(function (ProblemGroup) { 
return ProblemGroup.order(function(p) { 
    return p.TicketCount; 
}).top(2); 
})

這是your Fiddle與指定chages。

。數據（[回調]）

設置數據回調或檢索圖表的數據集。數據回調已通過圖表組，默認情況下將返回 group.all（）。這種行爲可以被修改爲，比如，返回只有前5組：
chart.data(function(group) { 
    return group.top(5); 
}); 

來源

2015-07-07 03:24:32 Greenhorn

你的解決方案對我不好，因爲我需要看到pieChart的「其他」部分。 – Alberto

我知道它有點晚了，但我是這樣解決的疑難問題。創建一個自定義othersGrouper和cappedValueAccessor功能下圖是相同的代碼。

chartProblems.othersGrouper(function (topItems, restItems) { 
      var restItemsSum = d3.sum(restItems, chartProblems.valueAccessor()), 
       restKeys = restItems.map(chartProblems.keyAccessor()); 
      if (restItemsSum > 0) { 
       topItems = topItems.concat([{ 
        others: restKeys, 
        key: chartProblems.othersLabel(), 
        // value:restItemsSum, 
        value: { 
         TicketCount: restItemsSum 

        } 
       }]); 
      } 
      return topItems; 
     });  
chartProblems.cappedValueAccessor = function (d, i) { 
      if (d.others) { 
       return d.value.TicketCount; 
      } 
      return chartProblems.valueAccessor()(d, i); 
     };

，因爲你已經減少您的組返回一個自定義對象，您必須修改othersgrouper和cappedvalueAccessor功能，以便使用餅圖的cap功能。 Here是上面使用的小提琴的更新鏈接。

來源

2017-05-31 10:38:36 talentedandrew

dc.js - 如何使用.cap（）和.valueAccessor（）？

回答

相關問題