我正在尝试在我的项目中实现D3甜甜圈饼图,基本上 像this。
当数据数量为 很小,但是随着数据的增加和饼形变小,标签会重叠 使其无法读取,我的馅饼看起来像this。
如何制作标签 像this一样?
我的代码:
<script type="text/javascript" src="d3Dashboard.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="chartContainer" class="card card-body bg-light"></div>
<script type="text/javascript">
var sampleData =[{"level":0,"name":"PROBOSCIDEA","common_name":"","children":[{"level":1,"name":"Elephantidae ","common_name":"","children":[{"level":2,"name":"Elephas maximus ","common_name":"Asian Elephant","children_no":1}],"children_no":1}],"children_no":1},{"level":0,"name":"SCANDENTIA","common_name":"","children":[{"level":1,"name":"Tupaiidae ","common_name":"","children":[{"level":2,"name":"Tupaia belangeri ","common_name":"Northern Treeshrew","children_no":1}],"children_no":1}],"children_no":1},{"level":0,"name":"PRIMATES","common_name":"","children":[{"level":1,"name":"Cercopithecidae ","common_name":"","children":[{"level":2,"name":"Macaca assamensis ","common_name":"Assam Macaque","children_no":1},{"level":2,"name":"Macaca mulatta","common_name":"Rhesus Macaque","children_no":1},{"level":2,"name":"Semnopithecus entellus ","common_name":"Northern Plains Gray Langur","children_no":1},{"level":2,"name":"Semnopithecus hector ","common_name":"Tarai Gray Langur","children_no":1},{"level":2,"name":"Semnopithecus schistaceus","common_name":"Nepal Gray Langur","children_no":1}],"children_no":5}],"children_no":1},{"level":0,"name":"RODENTIA","common_name":"","children":[{"level":1,"name":"Sciuridae ","common_name":"","children":[{"level":2,"name":"Ratufa bicolor ","common_name":"Black Giant Squirrel","children_no":1},{"level":2,"name":"Belomys pearsonii","common_name":"Hairy-footed Flying Squirrel","children_no":1},{"level":2,"name":"Eupetaurus cinereus ","common_name":"Woolly Flying Squirrel","children_no":1},{"level":2,"name":"Hylopetes alboniger ","common_name":"Particoloured Flying Squirrel","children_no":1},{"level":2,"name":"Petaurista elegans ","common_name":"Spotted Giant Flying Squirrel","children_no":1},{"level":2,"name":"Petaurista magnificus ","common_name":"Hodgson's Giant Flying Squirrel","children_no":1},{"level":2,"name":"Petaurista nobilis ","common_name":"Bhutan Giant Flying Squirrel","children_no":1},{"level":2,"name":"Petaurista petaurista ","common_name":"Red Giant Flying Squirrel","children_no":1},{"level":2,"name":"Callosciurus erythraeus ","common_name":"Pallas?s Squirrel","children_no":1},{"level":2,"name":"Callosciurus pygerythrus ","common_name":"Irrawaddy Squirrel","children_no":1},{"level":2,"name":"Dremomys lokriah","common_name":"Orange-bellied Himalayan Squirrel","children_no":1},{"level":2,"name":"Funambulus pennantii ","common_name":"Northern Palm Squirrel","children_no":1},{"level":2,"name":"Tamiops macclellandii ","common_name":"Himalayan Striped Squirrel","children_no":1},{"level":2,"name":"Marmota himalayana ","common_name":"Himalayan Marmot","children_no":1}],"children_no":14},{"level":1,"name":"Spalacidae ","common_name":"","children":[{"level":2,"name":"Cannomys badius ","common_name":"Lesser Bamboo Rat","children_no":1}],"children_no":1},{"level":1,"name":"Cricetidae ","common_name":"","children":[{"level":2,"name":"Alticola roylei ","common_name":"Royle's Mountain Vole","children_no":1},{"level":2,"name":"Neodon sikimensis","common_name":"Sikkim Mountain Vole","children_no":1}],"children_no":2},{"level":1,"name":"Muridae","common_name":"","children":[{"level":2,"name":"Tatera indica","common_name":"Indian Gerbil","children_no":1},{"level":2,"name":"Bandicota bengalensis","common_name":"Lesser Bandicoot-rat","children_no":1},{"level":2,"name":"Bandicota indica ","common_name":"Greater Bandicoot-rat","children_no":1},{"level":2,"name":"Dacnomys millardi","common_name":"Millard?s Dacnomys","children_no":1},{"level":2,"name":"Golunda ellioti ","common_name":"Indian Bush Rat","children_no":1},{"level":2,"name":"Leopoldamys edwardsi","common_name":"Edward?s Leopoldamys","children_no":1},{"level":2,"name":"Mus booduga ","common_name":"Little Indian Field Mouse","children_no":1},{"level":2,"name":"Mus musculus","common_name":"House Mouse","children_no":1},{"level":2,"name":"Mus pahari","common_name":"Indochinese Shrew-like Mouse","children_no":1},{"level":2,"name":"Niviventer eha ","common_name":"Smoke-bellied Niviventer","children_no":1},{"level":2,"name":"Niviventer fulvescens","common_name":"Indomalayan Niviventer","children_no":1},{"level":2,"name":"Niviventer niviventer ","common_name":"Himalayan Niviventer","children_no":1},{"level":2,"name":"Rattus andamanensis ","common_name":"Indochinese Forest Rat","children_no":1},{"level":2,"name":"Rattus nitidus ","common_name":"White-footed Indochinese Rat","children_no":1},{"level":2,"name":"Rattus pyctoris","common_name":"Himalayan Rat","children_no":1},{"level":2,"name":"Rattus rattus","common_name":"Roof Rat","children_no":1},{"level":2,"name":"Rattus tanezumi","common_name":"Oriental House Rat","children_no":1},{"level":2,"name":"Vandeleuria oleracea","common_name":"Indomalayan Vandeleuria","children_no":1}],"children_no":18},{"level":1,"name":"Hystricidae ","common_name":"","children":[{"level":2,"name":"Hystrix brachyura ","common_name":"Malayan Porcupine","children_no":1}],"children_no":1}],"children_no":5},{"level":0,"name":"LAGOMORPHA","common_name":"","children":[{"level":1,"name":"Ochotonidae","common_name":"","children":[{"level":2,"name":"Ochotona curzoniae ","common_name":"Plateau Pika","children_no":1},{"level":2,"name":"Ochotona forresti ","common_name":"Forrest's Pika","children_no":1},{"level":2,"name":"Ochotona macrotis ","common_name":"Large-eared Pika","children_no":1},{"level":2,"name":"Ochotona roylei ","common_name":"Royle's Pika","children_no":1},{"level":2,"name":"Ochotona thibetana","common_name":"Moupin Pika","children_no":1}],"children_no":5},{"level":1,"name":"Leporidae ","common_name":"","children":[{"level":2,"name":"Caprolagus hispidus","common_name":"Hispid Hare","children_no":1},{"level":2,"name":"Lepus nigricollis","common_name":"Indian Hare","children_no":1},{"level":2,"name":"Lepus oiostolus","common_name":"Wolly Hare ","children_no":1}],"children_no":3}],"children_no":2},{"level":0,"name":"SORICOMORPHA","common_name":"","children":[{"level":1,"name":"Soricidae","common_name":"","children":[{"level":2,"name":"Crocidura attenuata","common_name":"Asian Gray Shrew","children_no":1},{"level":2,"name":"Suncus etruscus","common_name":"Etruscan Shrew","children_no":1},{"level":2,"name":"Suncus murinus","common_name":"Asian Musk Shrew","children_no":1},{"level":2,"name":"Chimarrogale himalayica","common_name":"Himalayan Water Shrew","children_no":1},{"level":2,"name":"Episoriculus caudatus","common_name":"Hodgson's Brown-toothed Shrew","children_no":1},{"level":2,"name":"Episoriculus leucops","common_name":"Long-tailed Brown-toothed Shrew","children_no":1},{"level":2,"name":"Episoriculus macrurus","common_name":"Long-tailed Mountain Shrew","children_no":1},{"level":2,"name":"Nectogale elegans","common_name":"Elegant Water Shrew","children_no":1},{"level":2,"name":"Soriculus nigrescens","common_name":"Himalayan Shrew","children_no":1}],"children_no":9},{"level":1,"name":"Talpidae ","common_name":"","children":[{"level":2,"name":"Euroscaptor micrura ","common_name":"Himalayan Mole","children_no":1}],"children_no":1}],"children_no":2},{"level":0,"name":"CHIROPTERA","common_name":"","children":[{"level":1,"name":"Pteropodidae ","common_name":"","children":[{"level":2,"name":"Cynopterus sphinx ","common_name":"Greater Short-nosed Fruit Bat","children_no":1},{"level":2,"name":"Eonycteris spelaea","common_name":"Lesser Dawn Bat","children_no":1},{"level":2,"name":"Megaerops niphanae ","common_name":"Ratanaworabhan?s Fruit Bat","children_no":1},{"level":2,"name":"Macroglossus sobrinus","common_name":"Greater Long-nosed Fruit Bat","children_no":1},{"level":2,"name":"Pteropus giganteus","common_name":"Indian Flying Fox","children_no":1},{"level":2,"name":"Rousettus leschenaultii","common_name":"Leschenault's Rousette","children_no":1},{"level":2,"name":"Sphaerias blanfordi","common_name":"Blanford's Fruit Bat","children_no":1}],"children_no":7},{"level":1,"name":"Rhinolophidae ","common_name":"","children":[{"level":2,"name":"Rhinolophus affinis","common_name":"Intemediate Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus ferrumequinum ","common_name":"Greater Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus lepidus","common_name":"Blyth?s Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus luctus ","common_name":"Woolly Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus macrotis","common_name":"Big-eared Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus pearsonii","common_name":"Pearson?s Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus pusillus","common_name":"Least Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus rouxii","common_name":"Rufous Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus sinicus","common_name":"Chinese Rufous Horseshoe Bat","children_no":1},{"level":2,"name":"Rhinolophus trifoliatus","common_name":"Trefoil Horseshoe Bat","children_no":1}],"children_no":10},{"level":1,"name":"Hipposideridae","common_name":"","children":[{"level":2,"name":"Coelops frithii","common_name":"East Asian Tailless Leaf-nosed Bat","children_no":1},{"level":2,"name":"Hipposideros armiger","common_name":"Great Leaf-nosed Bat","children_no":1},{"level":2,"name":"Hipposideros cineraceus","common_name":"Ashy Leaf-nosed Bat","children_no":1},{"level":2,"name":"Hipposideros lankadiva","common_name":"Kelaart?s Leaf-nosedBat","children_no":1},{"level":2,"name":"Hipposideros pomona","common_name":"Pomona Leaf-nosed Bat","children_no":1}],"children_no":5},{"level":1,"name":"Megadermatidae ","common_name":"","children":[{"level":2,"name":"Megaderma lyra","common_name":"Greater False Vampire Bat","children_no":1}],"children_no":1},{"level":1,"name":"Emballonuridae ","common_name":"","children":[{"level":2,"name":"Taphozous longimanus","common_name":"Long-winged Tomb Bat","children_no":1},{"level":2,"name":"Taphozous nudiventris ","common_name":"Naked-rumped Tomb Bat","children_no":1}],"children_no":2},{"level":1,"name":"Molossidae ","common_name":"","children":[{"level":2,"name":"Tadarida teniotis","common_name":"European Free-tailed Bat","children_no":1}],"children_no":1},{"level":1,"name":"Vespertilionidae ","common_name":"","children":[{"level":2,"name":"Arielulus circumdatus","common_name":"Bronze Sprite","children_no":1},{"level":2,"name":"Eptesicus serotinus","common_name":"Common Serotine","children_no":1},{"level":2,"name":"Eptesicus tatei","common_name":"Sombre Bat","children_no":1},{"level":2,"name":"Scotomanes ornatus","common_name":"Harlequin Bat","children_no":1},{"level":2,"name":"Scotophilus kuhlii","common_name":"Lesser Asiatic Yellow Bat","children_no":1},{"level":2,"name":"Nyctalus noctula","common_name":"Noctule","children_no":1},{"level":2,"name":"Pipistrellus cadornae","common_name":"Cadorna's Pipistrelle","children_no":1},{"level":2,"name":"Pipistrellus coromandra ","common_name":"Indian Pipistrelle","children_no":1},{"level":2,"name":"Pipistrellus javanicus ","common_name":"Javan Pipistrelle","children_no":1},{"level":2,"name":"Pipistrellus tenuis","common_name":"Least Pipistrelle","children_no":1},{"level":2,"name":"Barbastella leucomelas","common_name":"Eastern Barbastelle","children_no":1},{"level":2,"name":"Plecotus auritus","common_name":"Brown Long-eared Bat","children_no":1},{"level":2,"name":"Falsistrellus affinis","common_name":"Chocolate Pipistrelle","children_no":1},{"level":2,"name":"Philetor brachypterus","common_name":"Rohu?s Bat","children_no":1},{"level":2,"name":"Tylonycteris pachypus","common_name":"Lesser Bamboo Bat","children_no":1},{"level":2,"name":"Myotis annectans","common_name":"Hairy-faced Myotis","children_no":1},{"level":2,"name":"Myotis formosus","common_name":"Hodgson?s Myotis","children_no":1},{"level":2,"name":"Myotis muricola","common_name":"Nepalese Whiskered Myotis","children_no":1},{"level":2,"name":"Myotis nipalensis","common_name":"Nepal Myotis","children_no":1},{"level":2,"name":"Myotis sicarius","common_name":"Mandelli?s Mouse-eared Myotis","children_no":1},{"level":2,"name":"Myotis siligorensis","common_name":"Himalayan Whiskered Myotis","children_no":1},{"level":2,"name":"Harpiocephalus harpia","common_name":"Lesser Hairy-winged Bat","children_no":1},{"level":2,"name":"Harpiocephalus mordax","common_name":"Greater Hairy-winged Bat","children_no":1},{"level":2,"name":"Murina aurata","common_name":"Little Tube-nosed Bat","children_no":1},{"level":2,"name":"Murina cyclotis","common_name":"Round-eared Tube-nosed Bat","children_no":1},{"level":2,"name":"Murina huttoni","common_name":"Hutton?s Tube-nosed Bat","children_no":1},{"level":2,"name":"Murina leucogaster","common_name":"Greater Tube-nosed Bat","children_no":1},{"level":2,"name":"Murina tubinaris","common_name":"Scully?s Tube-nosed Bat","children_no":1},{"level":2,"name":"Kerivoula hardwickii","common_name":"Hardwicke?s Woolly Bat","children_no":1},{"level":2,"name":"Kerivoula picta","common_name":"Painted Woolly Bat","children_no":1}],"children_no":30}],"children_no":7},{"level":0,"name":"PHOLIDOTA","common_name":"","children":[{"level":1,"name":"Manidae ","common_name":"","children":[{"level":2,"name":"Manis crassicaudata","common_name":"Indian Pangolin","children_no":1},{"level":2,"name":"Manis pentadactyla","common_name":"Chinese Pangolin","children_no":1}],"children_no":2}],"children_no":1},{"level":0,"name":"CARNIVORA","common_name":"","children":[{"level":1,"name":"Felidae","common_name":"","children":[{"level":2,"name":"Catopuma temminckii","common_name":"Asiatic Golden Cat","children_no":1},{"level":2,"name":"Felis chaus","common_name":"Jungle Cat","children_no":1},{"level":2,"name":"Lynx lynx","common_name":"Eurasian Lynx","children_no":1},{"level":2,"name":"Pardofelis marmorata","common_name":"Marbled Cat","children_no":1},{"level":2,"name":"Prionailurus bengalensis","common_name":"Leopard Cat","children_no":1},{"level":2,"name":"Prionailurus viverrinus","common_name":"Fishing Cat","children_no":1},{"level":2,"name":"Neofelis nebulosa","common_name":"Clouded Leopard","children_no":1},{"level":2,"name":"Panthera uncia","common_name":"Snow Leopard","children_no":1},{"level":2,"name":"Panthera pardus","common_name":"Leopard","children_no":1},{"level":2,"name":"Panthera tigris","common_name":"Tiger","children_no":1}],"children_no":10},{"level":1,"name":"Viverridae","common_name":"","children":[{"level":2,"name":"Arctictis binturong","common_name":"Binturong","children_no":1},{"level":2,"name":"Paguma larvata","common_name":"Masked Palm Civet","children_no":1},{"level":2,"name":"Paradoxurus hermaphroditus","common_name":"Asian Palm Civet","children_no":1},{"level":2,"name":"Viverra zibetha","common_name":"Large Indian Civet","children_no":1},{"level":2,"name":"Viverricula indica","common_name":"Small Indian Civet","children_no":1}],"children_no":5},{"level":1,"name":"Prionodontinae ","common_name":"","children":[{"level":2,"name":"Prionodon pardicolor ","common_name":"Spotted Linsang","children_no":1}],"children_no":1},{"level":1,"name":"Herpestidae ","common_name":"","children":[{"level":2,"name":"Herpestes auropunctatus?","common_name":"Small Indian Mongoose","children_no":1},{"level":2,"name":"Herpestes edwardsii","common_name":"Grey Mongoose","children_no":1},{"level":2,"name":"Herpestes urva","common_name":"Crab-eating Mongoose","children_no":1}],"children_no":3},{"level":1,"name":"Canidae ","common_name":"","children":[{"level":2,"name":"Canis aureus","common_name":"Golden Jackal","children_no":1},{"level":2,"name":"Canis lupus?","common_name":"Grey Wolf","children_no":1},{"level":2,"name":"Cuon alpinus","common_name":"Dhole","children_no":1},{"level":2,"name":"Vulpes bengalensis","common_name":"Bengal Fox","children_no":1},{"level":2,"name":"Vulpes ferrilata","common_name":"Tibetan Sand Fox","children_no":1},{"level":2,"name":"Vulpes vulpes","common_name":"Red Fox","children_no":1}],"children_no":6},{"level":1,"name":"Ursidae ","common_name":"","children":[{"level":2,"name":"Melursus ursinus","common_name":"Sloth Bear","children_no":1},{"level":2,"name":"Ursus arctos","common_name":"Brown Bear","children_no":1},{"level":2,"name":"Ursus thibetanus","common_name":"Asiatic Black Bear","children_no":1}],"children_no":3},{"level":1,"name":"Mustelidae","common_name":"","children":[{"level":2,"name":"Aonyx cinereus","common_name":"Oriental small-clawed Otter","children_no":1},{"level":2,"name":"Lutra lutra","common_name":"Eurasian Otter","children_no":1},{"level":2,"name":"Lutrogale perspicillata ","common_name":"Smooth-coated Otter","children_no":1},{"level":2,"name":"Arctonyx collaris ","common_name":"Hog-badger","children_no":1},{"level":2,"name":"Martes flavigula","common_name":"Yellow-throated Marten","children_no":1},{"level":2,"name":"Martes foina ","common_name":"Beech Marten","children_no":1},{"level":2,"name":"Melogale personata ","common_name":"Burmese Ferret Badger","children_no":1},{"level":2,"name":"Mustela altaica ","common_name":"Mountain Weasel","children_no":1},{"level":2,"name":"Mustela kathiah ","common_name":"Yellow-bellied Weasel","children_no":1},{"level":2,"name":"Mustela sibirica","common_name":"Siberian Weasel","children_no":1},{"level":2,"name":"Mustela strigidorsa","common_name":"Black-striped Weasel","children_no":1}],"children_no":11},{"level":1,"name":"Ailuridae ","common_name":"","children":[{"level":2,"name":"Ailurus fulgens","common_name":"Red Panda","children_no":1}],"children_no":1}],"children_no":8},{"level":0,"name":"PERISSODACTYLA","common_name":"","children":[{"level":1,"name":"Equidae ","common_name":"","children":[{"level":2,"name":"Equus kiang","common_name":"Kiang","children_no":1}],"children_no":1}],"children_no":1},{"level":0,"name":"ARTIODACTYLA","common_name":"","children":[{"level":1,"name":"Suidae","common_name":"","children":[{"level":2,"name":"Porcula salvania","common_name":"Pygmy Hog","children_no":1},{"level":2,"name":"Sus scrofa","common_name":"Wild Boar","children_no":1}],"children_no":2},{"level":1,"name":"Moschidae","common_name":"","children":[{"level":2,"name":"Moschus chrysogaster","common_name":"Alpine Musk Deer","children_no":1},{"level":2,"name":"Moschus fuscus","common_name":"Black Musk Deer","children_no":1}],"children_no":2},{"level":1,"name":"Cervidae ","common_name":"","children":[{"level":2,"name":"Axis axis","common_name":"Chital","children_no":1},{"level":2,"name":"Muntiacus muntjak","common_name":"Indian Muntjac","children_no":1},{"level":2,"name":"Rusa unicolor","common_name":"Sambar","children_no":1}],"children_no":3},{"level":1,"name":"Bovidae","common_name":"","children":[{"level":2,"name":"Procapra picticaudata","common_name":"Tibetan Gazelle","children_no":1},{"level":2,"name":"Bos gaurus","common_name":"Gaur","children_no":1},{"level":2,"name":"Budorcas taxicolor","common_name":"Mishmi Takin","children_no":1},{"level":2,"name":"Capricornis thar","common_name":"Himalayan Serow","children_no":1},{"level":2,"name":"Hemitragus jemlahicus ","common_name":"Himalayan Tahr","children_no":1},{"level":2,"name":"Naemorhedus goral","common_name":"Himalayan Brown Goral","children_no":1},{"level":2,"name":"Ovis ammon?","common_name":"Argali","children_no":1},{"level":2,"name":"Pantholops hodgsonii","common_name":"Chiru","children_no":1},{"level":2,"name":"Pseudois nayaur","common_name":"Bharal","children_no":1}],"children_no":9}],"children_no":4}];
var config = {
containerId: "chartContainer",
width: 800,
height: 800,
data: sampleData,
label: function(d) {
//return d.data.name + " : " + d.data.children_no;
return d.data.name;
},
value: "children_no",
inner: "children",
tooltip: function(d) {
// return "<p> "+ d.name + " "+ d.children_no +" observations.</p>";
//return "<div><strong>" + d.name + "</strong> has <br>" + d.children_no + " child taxa.</div>";
return "<div><strong>" + d.name + "</strong> " + d.common_name + "</div>";
},
// transition: "bounce",
transitionDuration: 50,
donutRadius: 10
};
var samplePie = new psd3.Pie(config);
</script>