더 minimaler는 JSON 예를 들어 이전 문제에까지 이어

에서 수평선 차트를 cubism.js ... 나는 (minimal cubism.js horizon chart example (TypeError: callback is not a function))더 minimaler는 JSON 예를 들어 이전 문제에까지 이어

 <body> 
       <div class="mag"></div> 
       <script type="text/javascript"> 

var myContext = cubism.context(); 

var myMetr = myContext.metric(function(start, stop, step, callback) { 
     d3.json("../json/600s.json.php?t0=" + start/1000 + "&t1=" + stop/1000 + "&ss=" + step/1000, function(er, dt) { 
       if (!dt) return callback(new Error("unable to load data, or has NaNs")); 
       callback(null, dt.val); 
     }); 
}); 

var myHoriz = myContext.horizon() 
     .metric(myMetr); 

d3.select(".mag") 
     .call(myHoriz); 

       </script> 
     </body>

d3.json 이전보다 내 최소한의 수평선 차트 예를 훨씬 더 minimaler있어() 비트는 필자가 작성한 서버 측 .php를 호출하여 .json 버전의 측정 결과를 반환합니다. .php는 http 쿼리 문자열의 t0, t1 및 ss 항목으로 start, stop, step (cubism의 context.metric()이 사용하는) 단계를 취하여 .json 파일을 다시 보냅니다. 1000으로 나눈 값은 ms가 아닌 s에서 매개 변수를 예상했기 때문입니다. 그리고 dt.val은 내 측정 값의 실제 배열이 json 출력의 "val"멤버에 있기 때문에입니다.

{ 
    "other":"unused members...", 
    "n":5, 
    "val":[ 
     22292.078125, 
     22292.03515625, 
     22292.005859375, 
     22292.02734375, 
     22292.021484375 
    ] 
}

문제에 (나는 그것을 아래 최소한의 (나는 생각한다)을 깎았 다있어, 나는 사실을 모두 이해하는 대신에 단지 다른 예에서 붙여 최선을 기대하는 것이 지금이다 어떤 시나리오에서, 내가 바꾸려고하는 대부분의 것들이 그것들을 개선하는 대신에 깰 수있다), 시각적으로 더 유용하게 만들기 위해 매개 변수와 함수를 다시 시작해야한다. 우선

두 문제는이 측정이 22,300 주위에 하루 종일 놓을이다, 그래프 그냥 녹색으로 사각형이며, 레이블이 그냥 "22K"지속적으로 말한다 있도록 만, 아마 하루 종일 +/- 10 다릅니다.

은 내가 .format 레이블 (d3.format(). "3 층") (위, SI 메트릭 접두사를 사용하는 기본 .2s 대 따라서 "22K")을 고정했습니다.

은 내가 알아낼 수있는 것은 축, 규모, 범위, 또는 어떤이는 뷰어와 관련된 숫자의 범위를 표시하도록 하나를 사용하는 방법입니다. 수평선 차트의 녹색 및 네거티브 - 파랑 색과 어둡게 보이는 부분에 대해서는 실제로 신경 쓰지 않습니다. 방금 .json 데이터 소스에서 계속해서 측정 윈도우를 가져 오는 개념 증명으로 사용했지만, 실제로 유지해야하는 부분은 serverDelay, step, size 및 cubism.js와 같은 기능입니다. 지능적으로 데이터의 초기 창을 잡아서 .json 요청을 통해 점점 더 많은 것을 얻습니다.

그렇다면 필요한 큐 비젼 비트는 어떻게 유지할 수 있습니까?하지만 모든 22300s 그래프를 변경하면 중요한 +/- 10 단위가 유용하게 나타납니다.

업데이트 : Scott Cameron이 horizon.extent ([22315, 22320])에 대한 제안을 업데이트했습니다. 예. 시도했지만 효과가 없었습니다. 다른 것들 내가 위의 "최소한"에서 지금까지 변경 한 ...

600 samples all around 22300 +/- 10

var myHoriz = myContext.horizon() 
     .metric(myMetr) 
     .format(d3.format(".2f")) 
     .height(100) 
     .title("base1 (m): ") 
     .colors(["#08519c", "#006d2c"]) 
//  .extent([22315, 22320])   // no effect with or without this line 
;

는 그래서 같은 myHoriz 라인 위를 삽입 metric.subtract를 사용하여 그래프를 개선 할 수 있었다 : (하지만) 지금은 쓸모없는 숫자 레이블을 만든 :

var myMetr2 = myMetr.subtract(22315); 

var myHoriz = myContext.horizon() 
     .metric(myMetr2) 
     .format...(continue as above)

모든 예제는 역효과를 보인다 너무 간결하고 표현 보인다 미세 그대로하지만 난 그들에게 만들려고 개조하면 되겠 어의 많은 일을, 잘 모르겠어요 왜 그런가? 그리고 마찬가지로 API wiki를 참조 할 때 ... 아마도 API 작업에서 사용하는 5 가지 중 4 가지가 즉시 작동하지만 그 다음에는 항상 영향을 미치지 않는 것으로 보이는 것이나 차트를 완전히 파괴하는 것처럼 보입니다. 나는 지나치게 많은 매개 변수들이 실제로 함수가되는 방법에 대해 머리를 감쌌다는 것을 확신하지 못했습니다.

이 배율/범위 질문 이후의 장애물은 수평 시간 축을 다시 가져옵니다 (사물을 좀더 최소화하고 이해하기 쉽게하기 위해 다듬은 후).이를 면적보기 그래프에서 선 그래프

어쨌든 모든 방향과 제안을 부탁드립니다.

여기에 더 나은 수직 스케일로 하나,하지만 지금은 숫자 라벨은 내가 원하는되지 않습니다 : better vertical visually, worse numerically

출처

2013-08-29 Martin Moops

당신이 horizon.extent를 시도? 수평선 차트의 [최소, 최대] 값을 지정할 수 있습니다. 기본적으로 선형 눈금이 만들어져 범위 내의 값을 차트 높이 내의 픽셀 ('horizon.height 또는 기본값 30 픽셀로 지정됨)에 매핑합니다.

출처

2013-08-30 05:44:55

예 시도해 보았습니다. 위의 업데이트를 참조하십시오. –

범위가 작동하지 않는다는 것에 놀랐습니다. 실행중인 예제에 연결할 수있는 방법이 있습니까? –

음 정확히 아닙니다. 먼저 내 .json.php URL을 세상에 공개하고 싶지 않습니다. 또한 jsbin과 jsfiddle 둘 다에 넣으려고했는데 내 서버에있는 것뿐만 아니라 둘 다 작동하지도 않습니다. 예 : http://jsfiddle.net/yvH8w/12/ "데이터를로드 할 수 없습니다"라는 오류 검사, dt가 null 인 경우 및 매개 변수 순서가 반대로 된 것처럼 XMLHttpRequest 유형의 객체를 보유하는 경우에 발생합니다. 그리고 아직 jsfiddle 요청이 내 서버 아파치 로그에 들어오고 HTTP 200 응답을 보게됩니다. 물론 example.com이 실제 도메인으로 대체 된 것입니다. –

더 minimaler는 JSON 예를 들어 이전 문제에까지 이어

답변

관련 문제