DC JSブラシの高さを制限する

Question

ブラシの高さを制限する方法がありますか？Y軸の50％（Y軸の0〜250のブラシのみが機能します）ですか？ Example fiddle

JSコード：あなたの例はdc.js 1.7.0を使用していますが

var hitslineChart = dc.barChart("#chart-line-hitsperday"); 

      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/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: "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}, 
     {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} 
     ]; 

      var ndx = crossfilter(data); 
      var parseDate = d3.time.format("%m/%d/%Y").parse; 
      data.forEach(function(d) { 
     d.date = Date.parse(d.date); 
     d.total= d.http_404+d.http_200+d.http_302; 
     }); 
      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]));           
      dc.renderAll(); 

おかげで、 アルン

Answer 1

が、私はそれはたくさんだから、dc.js 2.0のために答えるつもりです新しいAPIといくつかのAPIが変更されました。

技術は、ブラシのサイズを変更するcoordinateGridMixinの機能を無効にすることです。これは少し毛深いですが、可能です。

ブラシをレンダリングする文書化されていない関数を3つオーバーライドする必要があります。renderBrush、setBrushY、（残念ながら）resizeHandlePathです。

これは毛がかってしまう理由は、私たちが実際にbrushHeightを無効にしたいということですが、それは私的な機能です。

我々はこのように私たち自身を定義します：

function height_over_2() { 
    return (hitslineChart._xAxisY() - hitslineChart.margins().top)/2; 
} 

はrenderBrushのために、我々はheight_over_2()でダウンブラシをシフトする必要があります。我々は完全に置き換えられます

dc.override(hitslineChart, 'renderBrush', function(g) { 
    hitslineChart._renderBrush(g); 
    var gBrush = hitslineChart.select('g.brush') 
     .attr('transform', 'translate(' + hitslineChart.margins().left + ',' + (hitslineChart.margins().top + height_over_2()) + ')') 
}); 

setBrushY（我々はそれに割り当てることができますが、我々は一貫性のためdc.overrideを使用します）：：

dc.override(hitslineChart, 'setBrushY', function(gBrush) { 
    gBrush.selectAll('rect') 
     .attr('height', height_over_2()); 
    gBrush.selectAll('.resize path') 
     .attr('d', hitslineChart.resizeHandlePath); 
}); 

私たちは変革を変更、その後、最初の呼び出しを通過します

最後に、resizeHandlePathも高さを使用し、ここでは（ぐふ）自体はcrossfilterのデモからコピーされた、dc.jsのうち、コードの大きな塊をコピーする必要があります。

dc.override(hitslineChart, 'resizeHandlePath', function (d) { 
    var e = +(d === 'e'), x = e ? 1 : -1, y = height_over_2()/3; 
    return 'M' + (0.5 * x) + ',' + y + 
     'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6) + 
     'V' + (2 * y - 6) + 
     'A6,6 0 0 ' + e + ' ' + (0.5 * x) + ',' + (2 * y) + 
     'Z' + 
     'M' + (2.5 * x) + ',' + (y + 8) + 
     'V' + (2 * y - 8) + 
     'M' + (4.5 * x) + ',' + (y + 8) + 
     'V' + (2 * y - 8); 
}); 

01あなたのフィドルの

フォーク：http://jsfiddle.net/gordonwoodhull/anz9gfy0/13/