如何將填充添加到在d3中用作滑塊的畫筆中？

Question

我使用筆刷作爲滑塊來選擇日期http://jsfiddle.net/8dLx727L/4/ 基於此示例http://bl.ocks.org/mbostock/6452972。

在我的JsFiddle和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); 

Answer 1

在CSS文件，我不得不刪除指針事件：無，

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

邁克·博斯托克解決了這個。