问如何将dc.js与d3 horizon chart集成起来进行数据渲染？

EN

class dcHorizonChart {
  constructor(parent, groupByKeyName, valueKeyName, group ) {
    this.data = null;
    this.height = 30
    this._groupByKeyIdx = groupByKeyName;
    this._valueKeyName = valueKeyName;
    
    this._root = d3.select(parent);
    dc.registerChart(this, group);    
  }
  
  groupAll(groupAll) {
  console.log("gac")
    if(!arguments.length)
      return this._groupAll;
    this._groupAll = groupAll;
    return this;
  }
  
  setData(data) {
  	this.data = data
  }
  
  render() {
		console.log("called once");
    this.redraw();
  }

  redraw() {
//  console.log(this.data.all())
   //console.log(this.data.all())
  
     var ndata = Enumerable.From(this.data.all()).Select("r=> { 'name': r.key["+this._groupByKeyIdx+"], 'val': r.key["+this._valueKeyName + "]}");
      ndata = ndata.GroupBy("$.name", "$.val" ).Select("{'id': $.Key(), 'values':$.ToArray()}")
      .ToArray();
    console.log(ndata)
 
   this._root.html(null)
 
     this._root.selectAll('.horizon')
    .data(ndata)
    .enter()
    .append('div')
    .attr('class', 'horizon')
    .each(function(d) {
      d3.horizonChart()
        .title(d.id)
        .call(this, d.values);
    });
    
    
    console.log("called");
  /*
    d3.select('body').selectAll('.horizon')
    .data(stocks)
    .enter()
    .append('div')
    .attr('class', 'horizon')
    .each(function(d) {
      d3.horizonChart()
        .title(d.stock)
        .call(this, d.values);
    });
  
    this._rect.transition()
      .duration(this._duration)
      .attr('fill', this._colors(this._groupAll.value()));
      */
  }
  
}

function loadStockData(stock, callback) {
  d3.csv('https://bost.ocks.org/mike/cubism/intro/stocks/' + stock + '.csv').then(function(rows) {
    rows = rows.map(function(d) {
      return [d3.timeParse(d.Date), +d.Open];
    }).filter(function(d) {
      return d[1];
    }).reverse();

    var date = rows[0][0],
      compare = rows[400][1],
      value = rows[0][1],
      values = [],
      indices = [];

    rows.forEach(function(d, i) {
      values.push(value = (d[1] - compare) / compare);
      indices.push(i);
    });

    
    callback({
      'stock': stock,
      'values': values,
      'indices': indices
    });
  });
}

var promises = [];
['AAPL', 'GOOG', 'MSFT'].forEach(function(stock) {
  promises.push(new Promise(function(resolve, reject) {
    var r = loadStockData(stock, resolve);
  }));
});

Promise.all(promises).then(function(stocks) {
  console.log(stocks);

  
  var data = [];
  data = Enumerable.From(stocks)
  .SelectMany( "val, index=>" +
      "Enumerable.From(val.values)" +
                ".Select(\"v,i => {'value': v, 'idx':i, 'name':'\" + val.stock + \"' } \")")
  .ToArray();
  /*
  for(var i = 0; i < stocks.length; i++) {
    for(var j= 0; j < stocks[i].indices.length; j++) {
        data.push({ 'idx':stocks[i].indices[j], 'name': stocks[i].stock, 'value': stocks[i].values[j] })
    }
  }
  */
  
  console.log(data);
  var ndx, runDimension, runGroup, overviewRunDimension, overviewRunGroup;
  ndx = crossfilter(data);
  var allDim = ndx.dimension(function(d){ return [d.idx, d.name, d.value] ;});
  
  runDimension = ndx.dimension(function(d) {return [d.name, d.idx]; });
  overviewRunDimension = ndx.dimension(function(d) {return [d.name, d.idx]; });
  runGroup = runDimension.group().reduceSum(function(d) { return d.value; });
  overviewRunGroup = overviewRunDimension.group().reduceSum(function(d) { return d.value; });

 var horizonChart = new dcHorizonChart("#test-hc", 1,2);
 horizonChart.setData(allDim.group());
 
 var overviewChart =  dc.seriesChart("#test-overview");
  overviewChart
    .width(768)
    .height(100)
    .chart(function(c) { return dc.lineChart(c).curve(d3.curveCardinal); })
    .x(d3.scaleLinear().domain([0,20]))
    .brushOn(true)
    .xAxisLabel("Run")
    .clipPadding(10)
    .dimension(runDimension)
    .group(runGroup)
    .seriesAccessor(function(d) {return "Expt: " + d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];})
    .valueAccessor(function(d) {return +d.value;});



  dc.renderAll();
});

 body {
        margin: 0;
        padding: 0;
    }

    .horizon {
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
        overflow: hidden;
        position: relative;
    }

    .horizon + .horizon {
        border-top: none;
    }

    .horizon canvas {
        display: block;
        image-rendering: pixelated;
    }

  .horizon .title,
  .horizon .value {
      bottom: 0;
      line-height: 30px;
      margin: 0 6px;
      position: absolute;
      font-family: sans-serif;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      white-space: nowrap;
  }

  .horizon .title {
      left: 0;
  }

  .horizon .value {
      right: 0;
  }

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>dc.js - Custom Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="//dc-js.github.io/dc.js/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//unpkg.com/dc@4/dist/style/dc.css" />

    <script src="//d3js.org/d3.v5.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.4/crossfilter.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dc/3.2.1/dc.min.js"></script>


    <script src="//npmcdn.com/d3-horizon-chart/build/d3-horizon-chart.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.js"></script>
  </head>

  <body>

    <div class="container">
      <div id="test-overview"></div>
      <div id="bar"></div>
      
      <br/>
      AAA
      <br>
      <div id="test-hc"></div>

    </div>
  </body>

</html>