수평선 컨텍스트에서 height()를 설정하면 오버플로 스케일링을 유지하면서 그래프가 늘어납니다.

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

Answer 1

입체파는 항상 당신이 그것을 설정 색상의 수와 동일한 대역의 숫자를 그릴 것입니다, 당신은 명시 적으로 범위를 설정하지 않는 한, 항상 설정됩니다 가장 높은 밴드 상단의 최대 값과 데이터의 최대 값. 즉, 크기를 변경할 때 동일한 해상도를 유지할 수있는 두 가지 옵션이 있습니다.

1) 익스텐트를 명시 적으로 horizon.extent([min, max])으로 설정하고 높이를 스케일 할 때 최소 및 최대 값의 배율을 조정할 수 있습니다. 즉, 차트의 높이를 두 배로 늘리면 범위의 최소값과 최대 값을 두 배로 늘리십시오.

2) 지정한 색상 수를 변경하여 생성하는 띠 수를 변경합니다. 즉, 차트의 높이를 두 배로하면 색의 수를 반으로하여 새로운 색 배열을 지정하십시오.