DC JS 极限刷牙高度

Question

有没有办法限制刷亮高度 - 比如 y 轴的 50%（仅从 Y 轴 0 - 250，刷亮应该有效）？ Example fiddle

JS代码：

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 1.7.0，但我将回答 dc.js 2.0，因为它更新很多并且一些 API 已更改。

该技术是覆盖 coordinateGridMixin 中的函数，该函数用于调整画笔的大小。这有点毛茸茸，但这是可能的。

事实证明，我们必须覆盖三个渲染画笔的未记录函数，renderBrush, setBrushY, and (unfortunately) 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 也使用高度，这里我们（呃）必须从 dc.js 中复制一大块代码，它本身是从 crossfilter 演示中复制的：

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

你的 fiddle 的分支：http://jsfiddle.net/gordonwoodhull/anz9gfy0/13/

DC JS 极限刷牙高度

DC JS Limiting brushing height

d3.js

dc.js