在立体主义示例中,将 context.horizon() 的高度参数更改为较小的值会导致图形过度绘制自身。增加值则相反 - 重叠较少。
但是,当我更改高度参数时,我的图表保留了相同级别的过度绘制,并且它们只是相应地按比例放大和缩小。当我减小高度时,图表实际上失去了分辨率。
我该如何解决这个问题?
这是我的代码:
var context = cubism.context().step(1000000).size(1000);
var graphite = context.graphite("http://graphite.example.com");
var horizon = context.horizon().metric(graphite.metric).height(200);
变量指标 = [
“总结(example0,'10s')”,
“总结(example1,'10s')”,
“总结(示例 2),'10s')”,
“总结(example3),'10s')”
]
d3.select("#supergraph").append("div")
.attr("类", "轴")
.call(context.axis().ticks(4).orient("top"));
d3.select("#supergraph").append("div")
.attr("类", "规则")
.call(context.rule());
d3.select("#supergraph").selectAll(".horizon")
.data(指标)
.enter().append("div")
.attr("类", "地平线")
.call(地平线);
最佳答案
Cubism 将始终绘制与您为其设置的颜色数量相等的波段数量,除非您明确设置范围,否则它将始终将最高波段顶部的最大值设置为您的最大值数据。这意味着您有两种选择可以在更改大小时保持相同的分辨率:
1) 您可以使用 horizon.extent([min, max])
显式设置范围,并在缩放高度时缩放最小值和最大值。换句话说,如果您将图表的高度加倍,则范围的最小值和最大值也加倍。
2) 你可以改变你给它的颜色数量,这将改变它创建的波段数量。换句话说,如果您将图表的高度加倍,则为其提供颜色数量减半的新颜色数组。
关于javascript - 在地平线上下文中设置 height() 会拉伸(stretch)图形,同时保留覆盖图缩放比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13731752/