Question

在立体主义示例中，将context.horizon（）的height参数更改为较小的值会导致图形更多地过度绘制。增加价值的情况恰恰相反 - 过度绘图更少。

然而，当我更改高度参数时，我的图形保持相同的过度绘图水平，并且它们只是相应地上下调整。当我将高度调低时，图形会有效地失去分辨率。

我该如何解决这个问题？

这是我的代码：

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

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

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

Answer 1

立体主义总是绘制一些等于你为它设置的颜色数量的乐队，除非你明确设定一个范围，否则它总会将最高值的最大值设置为你的最大值。数据。这意味着在更改大小时，您有两个选项可以保持相同的分辨率：

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

2）您可以更改给它的颜色数量，这将改变它创建的波段数量。换句话说，如果您将图表的高度加倍，请为其添加一组颜色数量为一半的新颜色。

在水平上下文中设置高度（）会拉伸图形，同时保留过度绘图缩放

1 个答案: