如何強制dc.js在將其他數據添加到交叉過濾器之後重新繪製圖表

在將其他數據添加到交叉過濾器之後，dc.js不會重繪圖表。這裏是我的小提琴：http://jsfiddle.net/eugene_goldberg/v6j2ujrc/24/如何強制dc.js在將其他數據添加到交叉過濾器之後重新繪製圖表

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" 
      type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="dc.css" media="screen" /> 
    <title>Dc Tutorial</title> 

    <script type="text/javascript" src="crossfilter.js"></script> 
    <script type="text/javascript" src="d3.min.js"></script> 
    <script type="text/javascript" src="dc.js"></script> 

    <script type="text/javascript"> 
     var ndx; 

     var data = [ 
      {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
      {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100}, 
      {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0}, 
      {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0}, 
      {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1}, 
      {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0}, 
      {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0} 
     ]; 

     var data2 = [ 
      {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200}, 
      {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0}, 
      {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0}, 
      {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1}, 
      {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
     ]; 

     function renderChart(){ 
      var hitslineChart = dc.lineChart("#chart-line-hitsperday"); 

      ndx = crossfilter(data); 
      var parseDate = d3.time.format("%m/%d/%Y").parse; 
      data.forEach(function(d) { 
       d.date = parseDate(d.date); 
       d.total= d.http_404+d.http_200+d.http_302; 
       d.Year=d.date.getFullYear(); 
      }); 

      var dateDim = ndx.dimension(function(d) {return d.date;}); 
      var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
      var minDate = dateDim.bottom(1)[0].date; 
      var maxDate = dateDim.top(1)[0].date; 

      hitslineChart 
        .width(500).height(200) 
        .dimension(dateDim) 
        .group(hits) 
        .x(d3.time.scale().domain([minDate,maxDate])) 
        .brushOn(false) 
        .yAxisLabel("Hits per day"); 

      var yearRingChart = dc.pieChart("#chart-ring-year"); 
      var yearDim = ndx.dimension(function(d) {return +d.Year;}); 
      var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;}); 

      yearRingChart 
        .width(150).height(150) 
        .dimension(yearDim) 
        .group(year_total) 
        .innerRadius(30); 

      dc.renderAll(); 
     } 

     function addData(){ 
      console.log('adding data2 to ndx'); 
      ndx.add(data2); 
      dc.redrawAll(); 
     } 
    </script> 
</head> 
<body> 
<div id="chart-ring-year"></div> 
<div id="chart-line-hitsperday"></div> 
<button onclick="addData()">Add Data</button> 
<script> 
    renderChart(); 
</script> 
</body> 
</html>

有使這項工作的一種方式？

來源

2016-03-01 Eugene Goldberg

做一些搜索後，遇到了一個小提琴（http://jsfiddle.net/eugene_goldberg/3tf725aL/2/），其中有所需的技術：

'option strict' 
var data = [{ 
    "key": "KEY-1", 
    "state": "CA", 
    "topics": ["Technology", "Science", "Automotive"], 
    "date": new Date("10/02/2012") 
}, { 
    "key": "KEY-2", 
    "state": "CA", 
    "topics": ["Health"], 
    "date": new Date("10/05/2012") 
}, { 
    "key": "KEY-4", 
    "state": "WA", 
    "topics": ["Automotive", "Science"], 
    "date": new Date("10/09/2012") 
}, { 
    "key": "KEY-5", 
    "state": "WA", 
    "topics": ["Science"], 
    "date": new Date("10/09/2012") 
} 

]; 

var cf = crossfilter(data); 

var states = cf.dimension(function (d) { 
    return d.state; 
}); 
var stateGroup = states.group(); 

var pieChart = dc.pieChart("#piechart"); 
pieChart.height(75).width(75).dimension(states).group(stateGroup); 


dc.renderAll(); 

setTimeout(function() { 
    cf.add([{ 
     "key": "KEY-6", 
     "state": "MD", 
     "topics": ["Science"], 
     "date": new Date("10/09/2012") 
    }]); 
    dc.redrawAll(); 
}, 1000);

來源

2016-03-02 04:08:47

如何強制dc.js在將其他數據添加到交叉過濾器之後重新繪製圖表

回答

相關問題