Highchart Treemaps（ドリルダウン）の操作

Question

HighChart Treemapsに問題があります。私は等しいタイルでカスタムアルゴリズムに取り組んでいました。私は私のカスタムアルゴリズムを（他のSOの質問のおかげで）動作するようにしましたが、私はドリルダウンを達成することができません。カスタムアルゴリズムは、親ノードに対して完全に機能します。親をクリックすると、最新の子だけがマップ全体をカバーします。私はalgoをカスタマイズしようとしましたが、どこにも行きませんでした。

ご協力いただきまして誠にありがとうございます。 JSfiddleに掲載されたコード。緑のタイルには子供がいます。紫色の親は1つも持っていません。

function myFunction(parent, children) { 
var x = parent.x, 
     y = parent.y, 
    w=20, 
    h=20,i,j, 
     childrenAreas = []; 
     console.log(parent); 
     console.log(children); 
Highcharts.each(children, function(child) { 


    if(child.level == 1) 
    { 
    //console.log("if part"+child.i+" "+x+ " "+y); 
    if(x>=parent.width) 
     { 
     x=parent.x; 
     y+=h; 

     } 
     else 
     { 
    x+=w; 
    } 

    } 
    else 
    { 
     //console.log(child); 


    } 
childrenAreas.push({ 
     x: x, 
     y: y, 
     width: w, 
     height: h 
    }); 
//console.log(parent.x+w); 



}); 
//console.log(childrenAreas); 
return childrenAreas; 

}

Complete code on JSfiddle

TIA

Answer 1

私はあなたの問題をドリルダウンがツリーマップでどのように機能するかが接続されていると思います。レイアウトアルゴリズムはうまくいきましたが、あなたのポイントをクリックすると、チャートが再コールされます（あなたのポイントをズームするのと同じような機能）、これがあなたのポイントのサイズが違う理由です。

2番目のレベルポイントの幅を変更する計算を行うことができます。したがって、再呼び出し後には、以前のレベルと同じ幅になります。ここで

Highcharts.each(children, function(child, i) { 
    if (child.level === 1) { 
    width = parent.width; 
    height = parent.height; 
    x = parent.x + i * w; 
    childrenAreas.push({ 
     x: x, 
     y: y, 
     width: w, 
     height: h 
    }); 
    } else { 
    pointW = w * w/width; 
    pointH = h * h/height; 
    x = parent.x + i * pointW; 
    childrenAreas.push({ 
     x: x, 
     y: y, 
     width: pointW, 
     height: pointH 
    }); 
    } 
}); 

あなたはそれが動作する方法の例を見ることができます：http://jsfiddle.net/99rbh2qj/8/

あなたはまた、あなたのチャートに標準Highchartsドリルダウンモジュールを使用することができます。http://jsfiddle.net/99rbh2qj/5/

よろしく。