Javascript 如何向d3中用作滑块的笔刷添加填充？

我使用画笔作为滑块来选择日期 基于这个例子

在我的JSFIDLE和bl.ocks示例中，当笔刷句柄位于开始或结束时 在该范围内，手柄上的可点击区域被切断约30%-40%，因为它超出了该范围

你知道如何让整个把手可以点击吗

var format = d3.time.format("%Y-%m-%d");
var endDate = d3.time.monday.round(new Date())

var x = d3.time.scale()
.domain([format.parse("2013-06-25"), endDate])
.nice(d3.time.monday)
.range([0, width])
.clamp(true);

var brush = d3.svg.brush()
.x(x)
.on("brush", brushed)
.on("brushend", brushended);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 44 + "," + 20 + ")");


var expr = function (i)  { 
return i === 6 || i == 12; 
}

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height / 2 + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(d3.time.month.range( format.parse("2013-06-25"), endDate).filter(function(d, i) {
  return expr(i); }))
//.ticks(d3.time.month, 6) format.parse("2013-06-25"), endDate
.tickFormat(function (d, i) {
return monthYearFormat(d);
})
.tickSize(0)
.tickPadding(30))

d3.select('path')
.attr('d', lineGenerator(brushBackgroundCoords))

var slider = svg.append("g")
.attr("class", "slider")
.call(brush);

slider.selectAll(".extent,.resize")
.remove();

slider.select(".background")
.attr("height", height);

var handle = slider.append("circle")
.attr("class", "handle")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("r", 22);

handle.append("rect")
 .attr("class", "handle-lable")
 .attr("width", 90)
 .attr("height",44)
 .attr("transform", "translate(0,44)")

var innerHandle = slider.append("circle")
.attr("class", "inner-handle")
.attr("transform", "translate(0," + height / 2 + ")")
.attr("r", 11);

---

在CSS文件中，我必须删除指针事件：无

.slider .handle {
    fill: #fff;
    stroke: #000;
    stroke-opacity: .5;
    stroke-width: 1.25px;
    cursor: move;
}

迈克·博斯托克解决了这个问题