gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:40:56 25 4
gpt4 key购买 nike

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

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

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

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

最佳答案

实现此目的的一种方法是操纵 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

关于javascript - d3.js:仅显示 xAxis 上的部分数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24490261/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com