d3.js：仅显示xAxis上的部分数据

Question

我使用带缩放/平移功能的线性比例图来显示大型数据集（500多个点）。这是我用来构建x-scale的代码：

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

最初，这将在可见窗格中绘制前四个矩形。通过操纵域使其相反[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）有一个例子可以用你在这里尝试的方式绘制：焦点+上下文http://bl.ocks.org/mbostock/1667367