Próbuję stworzyć częściowo wypełnione koła, takie jak te w końcowej wizualizacji konwencji politycznej NYT:http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

Dwa najczystsze przykłady kodu, które znalazłem dla clipPaths w d3 (https://gist.github.com/1067636 ihttp://bl.ocks.org/3422480) Utwórz poszczególne elementy div z unikalnymi identyfikatorami dla każdej ścieżki klipu, a następnie zastosuj te ścieżki do pojedynczych elementów.

Nie mogę dowiedzieć się, jak przejść od tych przykładów do wizualizacji z unikalnym okrągłym klipem ClipPath dla każdego elementu w zestawie elementów na podstawie wartości danych, dzięki czemu mogę stworzyć swój efekt.

Oto co mamjak dotąd:

Podane dane o następującej strukturze:

data = [        
    {value: 500, pctFull: 0.20, name: "20%"}, 
    {value: 250, pctFull: 0.75, name: "75%"},
    {value: 700, pctFull: 0.50, name: "50%"},        
]

1) Utwórz diagram siły z okręgiem dla każdego obiektu w zbiorze danych. Obszar okręgu pochodzi z wartości obiektów.

2) Oblicz k (i h) z proporcji (pctFull) dla każdego punktu danych przy użyciu algorytmu z przykładu mbostockhttp://bl.ocks.org/3422480

3) Użyj k, aby wygenerować rect dla każdego punktu danych, który obejmuje odpowiedni obszar okręgu.

Myślę, że ilustracja zostanie zrobiona, jeśli będę mógł ograniczyć widoczność każdego prostego do odpowiedniego kręgu, ale to jest miejsce, w którym utknąłem. Próbowałem kilku rzeczy, z których żaden nie zadziałał.

Oto jsfilddle:http://jsfiddle.net/G8YxU/2/