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和（不幸的是）resizeHandlePath。

这会变得毛茸茸的原因是我们真的想要覆盖brushHeight，但那个是私有函数。

我们将这样定义：

Mat

对于renderBrush，我们需要将画笔向下移动function height_over_2() { return (hitslineChart._xAxisY() - hitslineChart.margins().top)/2; }。我们先通过调用，然后修改变换：

height_over_2()

setBrushY我们将完全替换（我们可以分配给它，但我们会使用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()) + ')') });来保持一致性）：

dc.override

最后，resizeHandlePath也使用了高度，这里我们（呃）必须从dc.js中复制一大块代码，这本身就是从crossfilter demo中复制的：

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

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

DC JS限制刷牙高度

1 个答案: