2012-11-08 16 views
12

Potrzebuję utworzyć niestandardowy układ d3, który jest nieco zbliżony do treemap, ale w stylu trójkątnym. Oto zrzut ekranu, dzięki czemu można zrozumieć: enter image description here Pyramid layoutTworzenie niestandardowego układu d3

Jak widać, to działa bardzo schludny i pasuje moje potrzeby. Aby zakodować go, mam kod oparty na kodzie układu TreeMap:

d3.layout.pyramid= function() { 
    var hierarchy = d3.layout.hierarchy(), round = Math.round, size = [ 1, 1 ], padding = 0; 

    function populate (nodes, currentHeight, currentHeightPadded, currentBase, currentSumedWeight) { 
     ... 
    } 

    function populate_layers (layer, nodes,currentHeight,currentLength, currentSumedArea,currentSumedWeight) { 
     ... 
    } 

    function pyramid(d) { 
     var nodes = hierarchy(d), root = nodes[0]; 

     populate(root.children.slice(),0,0,0,0); 
     return nodes; 
    } 

    pyramid.padding = function(x) { 
     if (!arguments.length) return padding; 
     padding = x; 
     return pyramid; 
    }; 

    pyramid.size = function(x) { 
     if (!arguments.length) return size; 
     size = x; 
     return pyramid; 
    }; 

    return d3_layout_hierarchyRebind(pyramid, hierarchy); 
}; 

Mój problem jest, aby to zrobić, miałem bezpośrednio edytować plik d3.v2.js, ponieważ niektóre funkcje nie są dostępne dla prywatnych od outisde, w moim przypadku d3_layout_hierarchyRebind. Najwyraźniej wiem, że to nie jest najlepsza praktyka, ale nie mogę zdelegalizować pliku w oddzielnym scenariuszu, który nie jest widoczny z zewnątrz.

Nie wiem, czy jest to problem związany z d3 lub javascript, ale chciałbym wiedzieć, czy mógłbyś mi pomóc rozwiązać ten mały problem.

Z góry dziękujemy!

+1

Wygląda na to, że d3.js nie został zaprojektowany z zewnętrznie zdefiniowanymi układami. Możesz dołączyć napisany układ do niestandardowej wersji d3.js. Nie widzę innego sposobu, aby to zrobić. – fuzic

+0

Dobre pytanie i komentarz - ten sam problem zaobserwowano. Zaczyna się od uzyskania d3_identity już ... – andig

+0

Jak zaznaczył @ZachB, możesz utworzyć layout bez korzystania z przestrzeni nazw D3. Układ to tylko konfigurowalna funkcja, która odbiera dane i zwraca przetworzone dane, dokładnie to robi twoja funkcja. –

Odpowiedz

2

Po prostu skopiuj i wklej funkcję d3.layout.pyramid do nowego pliku i zmień nazwę funkcji, tak aby nie kolidowała z biblioteką d3. Prawdopodobnie wszystko będzie prywatne, więc tylko zewnętrzna funkcja będzie musiała zostać zmieniona. Prawdopodobnie nie będziesz musiał zmieniać przestrzeni nazw na "d3". To znaczy, że to powinno zadziałać:

var myPyramidLayout = function() { 
    ... 
} 
Powiązane problemy