javascript - d3.js:仅显示 xAxis 上的部分数据

Question

我正在使用具有缩放/平移功能的线性比例图表来显示大型数据集(500 多个点)。这是我用来构造 x 尺度的代码:

x = d3.scale.linear()
 .domain([0, data.length-1])
 .range([0, w]);

这样所有数据都被压缩到图表中，无法查看图像顶部的详细信息:

我想显示类似于底部图表的数据(并让用户使用平移功能滚动查看更多数据)。

Answer 1

实现此目的的一种方法是操纵 X 尺度的域，使其将缩放边界映射为映射到范围的 0 宽度值的最小/最大域值。然后，您可以使用剪辑路径剪辑/隐藏绘制在 X 比例范围之外的绘图部分。

使用 jsFiddle 示例可能更有意义:http://jsfiddle.net/reblace/8TmM9/

在这个例子中，有 10 个正方形总是被绘制。您可以检查 dom 以了解我在说什么。但是，有一个剪辑路径的宽度只够您一次看到其中的 4 个。 X 尺度将 0-9 的输入值映射到输出坐标。范围设置为 0 到绘制所有 10 个正方形所需的宽度，域设置为 [0, 9]。

var xScale = d3.scale.linear()
    .domain(d3.extent(data))
    .range([0, width]);
...

var svg = d3.select('#chart').append('svg')
    .attr('width', clipWidth)
    .attr('height', clipHeight);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
        .attr("width", clipWidth)
        .attr("height", clipHeight);

...

var g = svg.append("g");
g.selectAll("rect")
    .data(data).enter().append('rect')
        .attr("class", "area").attr("clip-path", "url(#clip)")
        .attr('x', xScale)
        .attr('width', rectWidth)
        .attr('height', rectHeight)
        .style('fill', d3.scale.category20());

最初，这将在可见 Pane 中绘制前四个矩形。通过操纵域使其变为 [1,10] 或 [2,11] 甚至 [-1, 8]，我们可以有效地左右移动绘制的元素，以便绘制不同的绘图跨度可见区域。

// Pan Left
xScale.domain([xScale.domain()[0] - 1, xScale.domain()[1] - 1]);

// Pan Right
xScale.domain([xScale.domain()[0] + 1, xScale.domain()[1] + 1]);

无论您是使用正方形还是绘图，此技术都是相同的。

Mike Bostock 有一个示例，它也按照您在此处尝试的方式对绘图执行此操作:Focus+Context http://bl.ocks.org/mbostock/1667367