Parse json tree with javascript to get and use a certain attribute to change colour dynamically


I have a json tree , which I want to parse to read an attribute . The attribute is a boolean , the problem is that not all nodes in the tree have the "checked attribute" , This is my json tree :


{
  "children": [
    {
      "children": [
        {
          "children": [],
          "id": 50,
          "name": "gfj",
          "checked ": true

        }
      ],
      "id": 51,
      "name": "malek"
    },
    {
      "children": [
        {
          "children": [
            {
              "children": [],
              "id": 49,
              "name": "nice",
              "checked ": true

            }
          ],
          "id": 48,
          "name": "amira",
          "checked": false
        }
      ],
      "id": 47,
      "name": "mahdi"
    }
  ],
  "id": 0,
  "name": "First"
}


So far I’ve been able to access and use the attribute ‘name’ this way :

        return d.children;

        },


      // the label accessor
      _label = function(d){

        return d.name;
          },

But when I do the same to the attribute checked and try to log the output nothing happens is it because not all nodes has the attribute ?

I need tone able to use in my code so that I can change the colour of my links (arrow) according to the value of the attribute ex : if it’s true , the stroke takes the colour green if it’s else it takes red.

Links represent the nodes of the tree and their depth in my js code and are related to links in my css code this is how I access the links in my js file this way :

“` `fb1.links = function(){ return _links; };“
and this is how I set every link’s colour in my css file :


    .link-0{ stroke: #188fc6; stroke-width: 3px}
    .link-1{ stroke: #188fc6; stroke-width: 2px}
    .link-2, .link-3, .link-4{ stroke: #188fc6; stroke-width: 2px;}

I want to be able to read the checked attribute and if its true change the colour of my links to green , if it’s false change it to red I’ve been stuck and don’t know how to do this here’s the js file


    ;(function(d3){
      "use strict";
      d3.fishbone = function(){
        /*
          A Fishbone diagram implemented in d3.
        */
    
        // private variables
        var _margin = 50,
    
          // the data...
          _nodes,
          _links;
    
        // d3 selections and related things used in tick function
        var _node,
          _link,
          _root,
          _arrowId = function(d){ return "arrow"; },
    
          // the children accessor
          _children = function(d){
            return d.children;
    
            },
    
    
          // the label accessor
          _label = function(d){
    
            return d.name;
              },
    
          _checked = function(d){
    
            return d.checked;
    
            },
    
          // a custom tick accessor
          _perNodeTick = function(d){},
    
    
          // arbitrary "nice" values
          _linkScale = d3.scale.log()
            .domain([1, 5])
            .range([60, 30]),
    
          // the main workhorse of the layout engine
          _force = d3.layout.force()
            .gravity(0)
            .size([
              window.document.documentElement.clientWidth,
              window.document.documentElement.clientHeight
            ])
            .linkDistance(_linkDistance)
            .chargeDistance([10])
            .on("tick", _tick);
    
        var fb1 = function($){
          /*
            the d3.fishbone modifier, expecting to be called against an `svg:svg`
            or `svg:g` bound to the root node of a navigable tree, i.e.
    
              d3.select("body").append("svg")
                .datum({name: "foo", children: [{name: "bar"}]})
                .call(d3.fishbone());
    
            in addition to the properties created by `d3.layout.force`, this will
            add some or all of the following properties, none of which are
            guaranteed to be stable, useful, or sane:
    
            - depth       int
            - horizontal  bool
            - vertical    bool
            - root        bool
            - childIdx    int
            - maxChildIdx bool
            - totalLinks  [int]
            - linkCount   int
          */
    
          _links = [];
          _nodes = [];
    
          // populate the nodes and the links globals as a side effect
          _build_nodes($.datum());
    
          // set the nodes and the links of the force
          _force
            .nodes(_nodes)
            .links(_links);
    
          // create the links
          _link = $.selectAll(".link")
            .data(_links);
    
          _link.enter().append("line");
    
          _link
            .attr({
              "class": function(d){ return "link link-" + d.depth; },
              "marker-end": function(d){
                return d.arrow ? "url(#" + _arrowId(d) + ")" : null;
              }
            });
    
          _link.exit().remove();
    
            if (_checked === true) {
                _link.addClass('true_case')
                _link.removeClass('false_case')
            } else if(_checked === false) {
                _link.removeClass('true_case')
                _link.addClass('false_case')
            }
    
          // establish the node selection
          _node = $.selectAll(".node").data(_nodes);
    
    
          // actually create nodes
          _node.enter().append("g")
            .attr({
              "class": function(d){ return "node" + (d.root ? " root" : ""); }
            })
            .append("text");
    
          _node.select("text")
            .attr({
              "class": function(d){ return "label-" + d.depth; },
              "text-anchor": function(d){
                return !d.depth ? "start" : d.horizontal ? "end" : "middle";
              },
              dy: function(d){
                return d.horizontal ? ".35em" : d.region === 1 ? "1em" : "-.2em";
              }
            })
            .text(_label);
    
          _node.exit().remove();
    
          // set up node events
          _node
            .call(_force.drag)
            .on("mousedown", function(){ d3.event.stopPropagation(); });
    
          // select this so we know its width in tick
          _root = $.select(".root").node();
        }; // fb1
    
    
        function _arrow($){
          // creates an svg:defs and marker with an arrow if needed...
          // really just an example, as they aren't very flexible
          var defs = $.selectAll("defs").data([1]);
    
          defs.enter().append("defs");
    
          // create the arrows
          defs.selectAll("marker#" + _arrowId())
            .data([1])
          .enter().append("marker")
            .attr({
              id: _arrowId(),
              viewBox: "0 -5 10 10",
              refX: 10,
              refY: 0,
              markerWidth: 10,
              markerHeight: 10,
              orient: "auto"
            })
          .append("path")
            .attr({d: "M0,-5L10,0L0,5"});
        }
    
        function _build_nodes(node){
          /*
            this builds up the real/fake nodes and links needed
            - a node on the "spine" can be like:
              - o--->
    
                  |
              - o-+->
    
                  |
              - o-+->
                  |
    
            - a node off a "rib" or "subrib" can be like:
    
              - o--->
    
                  
              - o--->
    
          */
          _nodes.push(node);
    
          var cx = 0;
    
          var between = [node, node.connector],
            nodeLinks = [{
              source: node,
              target: node.connector,
              arrow: true,
              depth: node.depth || 0
            }],
            prev,
            childLinkCount;
    
          if(!node.parent){
            _nodes.push(prev = {tail: true});
            between = [prev, node];
            nodeLinks[0].source = prev;
            nodeLinks[0].target = node;
            node.horizontal = true;
            node.vertical = false;
            node.depth = 0;
            node.root = true;
            node.totalLinks = []
          }else{
            node.connector.maxChildIdx = 0;
            node.connector.totalLinks = [];
          }
    
          node.linkCount = 1;
            function process(key,value) {
                console.log(key + " : "+value);
            }
            function traverse(o,func) {
                for (var i in o) {
                    func.apply(this,[i,o[i]]);
                    if (o[i] !== null && typeof(o[i])=="object") {
                        //going one step down in the object tree!!
                        traverse(o[i],func);
                    }
                }
            }
            traverse(_children,process);
    
            (_children(node) || []).forEach(function(child, idx){
            child.parent = node;
            child.depth = (node.depth || 0) + 1;
            child.childIdx = idx;
            child.region = node.region ? node.region : (idx & 1 ? 1 : -1);
            child.horizontal = !node.horizontal;
            child.vertical = !node.vertical;
    
    
              if(node.root && prev && !prev.tail){
              _nodes.push(child.connector = {
                between: between,
                childIdx: prev.childIdx
              })
              prev = null;
            }else{
              _nodes.push(prev = child.connector = {between: between, childIdx: cx++});
            }
    
            nodeLinks.push({
              source: child,
              target: child.connector,
              depth: child.depth
            });
    
            // recurse capturing number of links created
            childLinkCount = _build_nodes(child);
            node.linkCount += childLinkCount;
            between[1].totalLinks.push(childLinkCount);
    
    
          });
    
    
    
    
          between[1].maxChildIdx = cx;
    
          Array.prototype.unshift.apply(_links, nodeLinks);
    
          // the number of links created byt this node and its children...
          // TODO: use `linkCount` and/instead of `childIdx` for spacing
          return node.linkCount;
        }
    
    
        function _linePosition($){
          $.attr({
            x1: function(d){ return d.source.x; },
            y1: function(d){ return d.source.y; },
            x2: function(d){ return d.target.x; },
            y2: function(d){ return d.target.y; }
          })
        }
    
    
        function _nodePosition($){
          // uses an SVG `transform` to position nodes
          $.attr("transform", function(d){
            return "translate(" + d.x + "," + d.y + ")";
          })
        }
    
    
        function _linkDistance(d){
          // make longer links for nodes with more children, or of lower depth
          return (d.target.maxChildIdx + 1) * _linkScale(d.depth + 1);
        }
    
    
        function _tick(e){
          /*
            the primary layout mechanism: a fair amount of the work is done
            by links, but override a lot of it here.
    
            TODO: enable tweaks to these individual rules
          */
    
          // this is a "little bit"
          var k = 6 * e.alpha,
            // cache some variables
            size = _force.size(),
            width = size[0],
            height = size[1],
            // scratch variables for lengthy expressions
            a,
            b;
    
          _nodes.forEach(function(d){
            // handle the middle... could probably store the root width...
            if(d.root){ d.x = width - (_margin + _root.getBBox().width); }
            if(d.tail){ d.x = _margin; d.y = height / 2; }
    
            // put the first-generation items at the top and bottom
            if(d.depth === 1){
              d.y = d.region === -1 ? _margin : (height - _margin);
              d.x -= 10 * k;
            }
    
            // vertically-oriented tend towards the top and bottom of the page
            if(d.vertical){ d.y += k * d.region; }
    
            // everything tends to the left
            if(d.depth){ d.x -= k; }
    
            // position synthetic nodes at evently-spaced intervals...
            // TODO: do something based on the calculated size of each branch
            // since we don't have individual links anymore
            if(d.between){
              a = d.between[0];
              b = d.between[1];
    
              d.x = b.x - (1 + d.childIdx) * (b.x - a.x) / (b.maxChildIdx + 1);
              d.y = b.y - (1 + d.childIdx) * (b.y - a.y) / (b.maxChildIdx + 1);
            }
    
            _perNodeTick(d);
          });
    
          // actually apply all changes
          _node.call(_nodePosition);
          _link.call(_linePosition);
        }
    
        // the d3.fishbone() public API
        // read-only
        fb1.links = function(){ return _links; };
        fb1.nodes = function(){ return _nodes; };
        fb1.force = function(){ return _force; };
    
        // callable
        fb1.defaultArrow = _arrow;
    
        // d3-style chainable
        fb1.margin = function(_){
          // how big is the whitespace around the diagram?
          if(!arguments.length){ return _margin; }
          _margin = _;
          return my;
        };
    
        fb1.children = function(_){
          // how  will children be sought from each node?
          if(!arguments.length){ return _children; }
          _children = _;
          return my;
        };
    
        fb1.label = function(_){
          // how will a label be sought from each node?
          if(!arguments.length){ return _label; }
          _label = _;
          return my;
        };
    
        fb1.perNodeTick = function(_){
          // what custom rules should be done per node?
          if(!arguments.length){ return _perNodeTick; }
          _perNodeTick = _;
          return my;
        };
    
        return fb1;
      }; // d3.fishbone
    }).call(this, d3);



would appreciate a little help thank you so much

Source: CSS – Stack Overflow

November 24, 2021
Category : News
Tags: css | D3.js | html | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.