复合线和条形图

Question

根据戈登在thread中提出的建议，我正在创建一个新问题。我正在使用复合条形图和折线图;用于显示实际值的条形图和用于突出显示特定于过滤器持续时间（开始时间和结束时间之间）的日期过滤器（稍后要包括）的折线图。

我有2个要求：

1. 我希望折线图在过滤器持续时间内完全达到1，然后降至0。

2. 我在示例中提到了2个过滤日期，但只绘制了与图表值一致的日期。我希望在特定持续时间内绘制其他滤波器，而不管图表值如何。

Example fiddle

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

            var chart = dc.barChart("#test");
            var experiments = d3.csv.parse(d3.select("pre#data").text());
            experiments.forEach(function (x) {
                //console.log('dt: ' + parseDate(x.DT));
                x.DT = parseDate(x.DT);
                //x.DT = +x.DT;
                //console.log('pt: ' + x.Points);
                x.Points = +x.Points;
            });

            var minDate = new Date(2017, 0, 1, 5, 40, 35, 0);
            var maxDate = new Date(2017, 0, 10, 7, 28, 47, 0);

            var ndx = crossfilter(experiments),
			Dim = ndx.dimension(function (d) { return d.DT; }),
			Group = Dim.group().reduceSum(function (d) { return d.Points; });

            compChart = dc.compositeChart("#test1")

            subchart1 = dc.barChart(compChart)
                           .dimension(Dim)
                           .group(Group)
                           //.centerBar(true)
                           .gap(30)
                           .brushOn(true)
                           //.elasticX(true)
                           .elasticY(true)
                           .x(d3.time.scale().domain([minDate, maxDate]))
                           .xUnits(d3.time.days)
                           
            subchart2 = dc.lineChart(compChart)                            
                            .group(Group)
                            .colors('red')
                            .renderArea(false)
                            .interpolate('step')
                            .xUnits(d3.time.minutes)
                            .useRightYAxis(true)
                            .y(d3.scale.linear().domain([0, 1]))
                            .renderDataPoints(true)                            
                            .valueAccessor(function (d) {
                            
												//filter 1
                        var fStart = new Date(2017, 0, 3, 10, 00, 00, 00);
                        var fEnd = new Date(2017, 0, 3, 11, 00, 00, 00);
                        
                        //filter 2
                        var fStart1 = new Date(2017, 0, 8, 14, 30, 00, 00);
                        var fEnd1 = new Date(2017, 0, 8, 17, 45, 00, 00);

                                filterDate = new Date(d.key);

                                console.log('fd :' + filterDate);

                                if (filterDate.getTime() >= fStart.getTime() && filterDate.getTime() <= fEnd.getTime()) {
                                    console.log('inf1');
                                    return 1;
                                }
                                if (filterDate.getTime() >= fStart1.getTime() && filterDate.getTime() <= fEnd1.getTime()) {
                                    console.log('inf2');
                                    return 1;
                                }
                                else {
                                    return 0;
                                }
                            })

            compChart
                 .width(500)
                 .height(300)
                 .margins({top: 5, right: 50, bottom: 20, left: 50})
                 .dimension(Dim)
                 .x(d3.time.scale().domain([minDate, maxDate]))
                 .xUnits(d3.time.days)
                 .elasticY(true)               
                 .rightY(d3.scale.linear().domain([0, 1]))                                                    
                 .transitionDuration(100)                  
                 .compose([subchart1, subchart2])

            compChart.render();

<div id="test1">
</div>

<pre id="data" style="display: none">
DT,Points
2017-01-01 05:40:35,12
2017-01-02 08:20:12,74
2017-01-03 06:30:06,9
2017-01-04 05:40:53,57
2017-01-05 22:15:19,28
2017-01-06 14:35:41,36
2017-01-07 10:50:23,64
2017-01-08 16:18:02,93
2017-01-09 20:45:36,81
2017-01-10 07:28:47,25
</pre>

谢谢，

阿伦