d3使用时间刻度刷和设置最小刻度线

Question

EDITED

我正在尝试设置一个最小范围，为焦点图形'刷''上下文'。

在不担心设置最小值的情况下，我已成功实现了具有上下文和焦点的多系列图表。

问题是当范围足够小以至于当刷子足够小时它将在动态焦点图表上显示小时数。

我的问题是，是否可以设置最小刻度标记或限制刷子可以减少的数量，以确保刻度不会减少到几小时，但仅限于几天？

以下代码设置最小刻度，但无论画笔有多大，都会这样做，因此也可以显示刻度标记（天）。

function brushed() {
            removeFixedLine();
            var newData = brush.empty() ? x2.domain() : brush.extent();
            x.domain(newData);

            // Redraw tooltip x-axis
            focus.selectAll(".dot")
                .attr("cx", function (d) { return x(d.date); } );

            // Redraw lines     
            focus.selectAll("path.datapath").attr("d", line);
            minExtent = d3.time.day(brush.extent()[1]) - d3.time.day(brush.extent()[0]);
            console.log(minExtent);
            var newXAxis = xAxis;

            if (minExtent > 8640000) {
                xAxis.ticks(d3.time.days, 1);
                focus.select(".x.axis").call(xAxis);
            }
            else {
                focus.select(".x.axis").call(newXAxis);
            }
}

注意：这段代码已被编辑和按摩很多次，可能没有多大意义，但我希望实现的目标应该在那里。

Answer 1

当用户操作时，您不能强制刷子具有某个最小范围，但是您可以在brushed功能中添加检查以查看范围是否太小，如果是这样，则将其设置为最小值：

var minExtent = 8640000; 
    //minimum number of milliseconds to display in the focus chart

function brushed() {
        removeFixedLine();
        if ( brush.empty() ) {
            x.domain( x2.domain() ); //reset the domain (Note the typo fix!)
        } else {
            var newData = brush.extent();
            var width = newData[1] - newData[0]; 
                 //this assumes a single-direction brush,
                 //like in the original code

            if (width < minExtent) {
               var padding = ( minExtent - width )/2;
                   //amount to add onto each side of the extent
               newData[0] -= padding;
               newData[1] += padding;

               brush.extent(newData); 
                   //Update the extent value stored in the brush.

               brushGroup.call(brush); 
                   //Redraw the brush rectangles to match the modified extent.
                   //(Replace `brushGroup` with the d3 selection containing the 
                   //<g> element into which you originally drew the brush.)
            }

            x.domain(newData); 
                 //if width was greater than minExtent,
                 //this is just the extent from the brush
        }

        /* redraw the focus chart */

}

请注意，要应用修改后的范围，必须执行以下三项操作：

• 使用brush.extent(values)设置画笔对象的范围;

• 使用brush(selection)或selection.call(brush)重绘画笔的SVG表示（这是完全相同的事情，只是以不同的方式编写）;

• 像往常一样使用修改后的范围来设置焦点图表x-scale域。

Answer 2

设置每月最低限额：

var xAxis = d3.axisBottom(xScale).ticks(d3.timeMonth);

设置每日最低限额：

var xAxis = d3.axisBottom(xScale).ticks(d3.timeDay);