Question

EDITED

我正试图在刷牙时设定最小范围＆＃39; ＆＃39;上下文＆＃39;对于焦点图。

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

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

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

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

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

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

2 个答案: