Javascript 在水平上下文上设置height（）可拉伸图形，同时保留过地块缩放

在立体主义示例中，将context.horizon（）的height参数更改为较小的值会导致图形自身过度绘制。对于增加值，情况正好相反-过度抽签较少

但是，当我更改height参数时，我的图形保留了相同的过度绘制级别，它们只是相应地上下缩放。当我使高度变小时，图形实际上失去了分辨率

我该如何解决这个问题

这是我的密码：

var context=cubism.context（）.步骤（1000000）.大小（1000）

立体主义将始终绘制与您为其设置的颜色数相等的条带数，并且除非您明确设置范围，否则它将始终将最高条带顶部的最大值设置为数据的最大值。这意味着您有两个选项可以在更改大小时保持相同的分辨率：

1） 可以使用

horizon.extent（[min，max]）

显式设置范围，并在缩放高度时缩放最小值和最大值。换句话说，如果你把图表的高度增加一倍，那么你的范围的最小值和最大值也会增加一倍

---

2） 您可以更改为其提供的颜色数量，这将更改其创建的条带数量。换句话说，如果你把图表的高度增加了一倍，给它一个新的颜色数组，颜色的数量是原来的一半。

在JSFIDLE homieCan上发布一个示例。不行，数据直接来自我的私人网站Graphite。

var graphite = context.graphite("http://graphite.example.com");
var horizon = context.horizon().metric(graphite.metric).height(200);

var metrics = [
    "summarize(example0,'10s')",
    "summarize(example1,'10s')",
    "summarize(example2),'10s')",
    "summarize(example3),'10s')"
]   

d3.select("#supergraph").append("div")
    .attr("class", "axis")
    .call(context.axis().ticks(4).orient("top"));

d3.select("#supergraph").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("#supergraph").selectAll(".horizon")
    .data(metrics)
.enter().append("div")
    .attr("class", "horizon")
    .call(horizon);