javascript - d3画笔并使用时间刻度设置最小刻度线

已编辑

我试图为焦点图“刷”“上下文”时设置最小范围。

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

问题是，范围可以足够小时，如果画笔足够小，它将在动态焦点图上显示小时。

我的问题是，是否可以设置最小刻度线或限制画笔可以减少的数量，以确保刻度线不会减少到数小时，而是限制在几天内？

以下代码设置了最小刻度，但是无论画笔多大，它都会这样做，因此显示方式也可能会刻度（天）。

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

注意：此代码已经过多次编辑和修改，可能没有任何意义，但是我希望实现的要旨应该存在。

最佳答案

当用户操作画笔时，不能强制画笔具有某个最小范围，但是可以在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缩放域。

关于javascript - d3画笔并使用时间刻度设置最小刻度线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23345722/