how to encode this data to parent / children structure in JSON

前端 未结 3 1806
灰色年华
灰色年华 2021-02-02 14:44

I am working with d3.js to visualise families of animals (organisms) (up to 4000 at a time) as a tree graph, though the data source could just as well be a directory listing, or

3条回答
  •  甜味超标
    2021-02-02 15:17

    An alternative answer to my own question....In the past day I have learn't a great deal more about d3.js and in relation to this question d3.nest() with .key() and .entries() is my friend (all d3 functions). This answer involves changing the initial data, so it may not qualify as a good answer to the specific question i asked. However if someone has a similar question and can change things on the server then this is a pretty simple solution:

    return the data from the database in this format:

    json = {'Organisms': [
        { 'Rank_Order': 'Hemiptera',
          'Rank_Family': 'Miridae',
          'Rank_Genus': 'Kanakamiris',
          'Rank_Species': '' },
        {}, ...
    ]}
    

    Then using d3.nest()

    organismNest = d3.nest()
        .key(function(d){return d.Rank_Order;})
        .key(function(d){return d.Rank_Family;})
        .key(function(d){return d.Rank_Genus;})
        .key(function(d){return d.Rank_Species;})
        .entries(json.Organism);
    

    this returns:

    {
    key: "Hemiptera"
      values: [
        {
          key: "Cicadidae"
          values: [
            {
              key: "Pauropsalta "
              values: [
                {
                  key: "siccanus"
                  values: [
                           Rank_Family: "Cicadidae"
                           Rank_Genus: "Pauropsalta "
                           Rank_Order: "Hemiptera"
                           Rank_Species: "siccanus"
                           AnotherOriginalDataKey: "original data value"
    
    etc etc, nested and lovely
    

    This returns something very much similar to they array that I described as my desired format above in the question, with a few differences. In particular, There is no all enclosing ROOT element and also whereas they keys I originally wanted were "name" and "children" .nest() returns keys as "key" and "values" respectively. These alternatives keys are easy enough to use in d3.js by just defining appropriate data accessor functions (basic d3 concept) ... but that is getting beyond the original scope of the question ... hope that helps someone too

提交回复
热议问题