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

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

如何在d3中用作滑块的画笔添加填充？

1 个答案: