DC JS Begrenzung der Bürstenhöhe

Question

Gibt es eine Möglichkeit, die Bürstenhöhe zu begrenzen - etwa 50% der y-Achse (nur von der Y-Achse 0 - 250, Bürsten sollte funktionieren)? Example fiddle

JS-Code:

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(); 

Danke, Arun

Answer 1

Obwohl Ihr Beispiel verwendet dc.js 1.7.0, ich bin für dc.js 2.0, beantworten gehen, da es eine Menge ist neuere und einige APIs haben sich geändert.

Die Technik besteht darin, die Funktionen aus der coordinateGridMixin, die Größe der Bürste zu überschreiben. Das wird etwas haarig, aber es ist möglich.

Es stellt sich heraus, wir werden drei undokumentierte Funktionen außer Kraft zu setzen haben, die den Pinsel machen, renderBrush, setBrushY, und (leider) resizeHandlePath.

Der Grund, warum dies haarig wird, ist, dass wir wirklich brushHeight überschreiben wollen, aber das ist eine private Funktion.

Wir werden unsere eigenen wie folgt definieren:

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

Für renderBrush, müssen wir die Bürste nach unten durch height_over_2() verschieben. Wir werden zuerst durch den Anruf übergeben, dann das ändern verwandeln:

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 wir ganz ersetzen (wir konnten nur zuweisen, aber wir werden dc.override für Konsistenz verwenden):

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

Schließlich resizeHandlePath verwendet auch die Höhe, und hier sind wir (igitt) haben einen großen Teil des Codes aus dc.js kopieren, die sich von der crossfilter Demo kopiert wurde:

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); 
}); 

Gabel Ihrer Geige: http://jsfiddle.net/gordonwoodhull/anz9gfy0/13/