DC JS极限刷牙高度 [英] DC JS Limiting brushing height

问题描述

是否有一种方法可以限制刷洗高度-例如y轴的50％(仅从Y轴0-250开始，刷毛应该起作用)? 小提琴示例

Is there a way to limit the brushing height - say 50% of y axis (only from Y axis 0 - 250, brushing should work) ? 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();

谢谢， 阿伦

推荐答案

尽管您的示例使用的是dc.js 1.7.0，但我将回答dc.js 2.0，因为它更新了很多，并且有一些API改变了.

Although your example uses dc.js 1.7.0, I'm going to answer for dc.js 2.0, since it's a lot newer and a few APIs have changed.

该技术是要覆盖 ordinateGridMixin 可以设置画笔的大小.这有点毛茸茸，但有可能.

The technique is to override the functions from the coordinateGridMixin which size the brush. This gets a little hairy, but it's possible.

事实证明，我们将不得不重写三个未公开的函数来渲染画笔，

It turns out we'll have to override three undocumented functions which render the brush, renderBrush, setBrushY, and (unfortunately) resizeHandlePath.

之所以变得毛茸茸的原因是，我们真的想覆盖

The reason this gets hairy is that we really want to override brushHeight, but that one is a private function.

我们将这样定义自己:

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

对于renderBrush，我们需要将画笔向下移动height_over_2().我们将首先通过调用，然后修改转换:

For renderBrush, we need to shift the brush down by height_over_2(). We'll pass through the call first, then modify the transform:

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):

setBrushY we'll replace entirely (we could just assign to it, but we'll use dc.override for consistency):

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

最后，resizeHandlePath也使用高度，在这里，我们(ugh)必须从dc.js中复制一大段代码，该代码本身是从crossfilter演示中复制的:

Finally, resizeHandlePath also uses the height, and here we (ugh) have to copy a big chunk of code out of dc.js, which was itself copied from the crossfilter demo:

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

小提琴的叉子: http://jsfiddle.net/gordonwoodhull/anz9gfy0/13/

这篇关于DC JS极限刷牙高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！