如何在D3甜甜圈饼图中实现折线标签?

时间:2019-03-18 11:40:10

标签: javascript html d3.js

我正在尝试在我的项目中实现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>

0 个答案:

没有答案