javascript - 在地平线上下文中设置 height() 会拉伸(stretch)图形，同时保留覆盖图缩放比例

Question

在立体主义示例中，将 context.horizo​​n() 的高度参数更改为较小的值会导致图形过度绘制自身。增加值则相反 - 重叠较少。

但是，当我更改高度参数时，我的图表保留了相同级别的过度绘制，并且它们只是相应地按比例放大和缩小。当我减小高度时，图表实际上失去了分辨率。

我该如何解决这个问题？

这是我的代码:


var context = cubism.context().step(1000000).size(1000);

var graphite = context.graphite("http://graphite.example.com");
var horizo​​n = context.horizo​​n().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(".horizo​​n")
    .data(指标)
.enter().append("div")
    .attr("类", "地平线")
    .call(地平线);

Answer 1

Cubism 将始终绘制与您为其设置的颜色数量相等的波段数量，除非您明确设置范围，否则它将始终将最高波段顶部的最大值设置为您的最大值数据。这意味着您有两种选择可以在更改大小时保持相同的分辨率:

1) 您可以使用 horizo​​n.extent([min, max]) 显式设置范围，并在缩放高度时缩放最小值和最大值。换句话说，如果您将图表的高度加倍，则范围的最小值和最大值也加倍。

2) 你可以改变你给它的颜色数量，这将改变它创建的波段数量。换句话说，如果您将图表的高度加倍，则为其提供颜色数量减半的新颜色数组。