CODEWITHSUNDEEP
jsond3.js
Sijia Xiao
Sijia Xiao

Reputation: 137

d3.tree get min & max value

I want to get the min and max value of the "size" attributes(the json structure for tree includes three attributes: name, size and children) But I cannot get the right value. Though in the json file, the max value is 100, the min value is 5, the result I get is 94 and 100. And the most strange thing is that when I change the maximum size "100" to "99", the max and min value changes to 99 and 11. What is the problem?

here is the html file:

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>


var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 1500 - margin.right - margin.left, height = 500 - margin.top - margin.bottom;

var i = 0, duration = 750, root;

var tree = d3.layout.tree() .size([height, width])  .value(function(d) { return d.size;});

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("./parse_tree.json", function(error, parse_tree) {

        root = parse_tree;
        root.x0 = height / 2;
        root.y0 = 0;

        update(root);
        });

function update(source1) {
    var originalConsole = console;

    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

    var node = svg.selectAll("g.node")
        .data(nodes, function(d) { return d.id || (d.id = ++i); });

    var t_max = d3.max(nodes, function(d) { return d.size;})
        var t_min = d3.min(nodes, function(d) { return d.size;});
    originalConsole.log(t_max);
    originalConsole.log(t_min);
}

</script>

Here is the json file:

{
"name":"para",
"size":"11",
"children":[
    {
    "name":"top",
    "size":"32",
    "children":[
        {"name":"S",
         "size":"13",
         "children": [
            {"name":"NP",
            "size":"5",
                "children":[
                {"name":"PRP",
                 "size":"89",
                 "children":[{"name":"You","size":"88"}]
                }
            ]
         },
         {"name":"VP",
          "size":"89",
         "children": [
         {"name":"VBP",
          "size":"15",
         "children":[{"name":"are", "size":"38"}]
         },
         {"name":"NP",
          "size":"83",
         "children": [
         {"name":"DT",
          "size":"29",
         "children":[{"name":"a", "size":"53"}]
         },
         {"name":"NN",
          "size":"50",
         "children":[{"name":"boy", "size":"99"}]
         }
         ]
         }
         ]
         },
         {"name":".",
          "size":"94",
         "children":[{"name":".", "size": "67"}]
        }
        ]
        }
        ]
    }
]
}

Upvotes: 1

Views: 2099

Answers (1)

Pinguin Dirk
Pinguin Dirk

Reputation: 1433

The size in the JSON object is a string, thus things turn out "not quite like expected".

So, to fix it, you have to change type to int, which is "luckily" pretty direct in JS:

var t_max = d3.max(nodes, function(d) {
   return +d.size;
})
var t_min = d3.min(nodes, function(d) {
  return +d.size;
});

... or somewhere else in the script.

Oh, and by the way, try this:

console.log(d3.extent(nodes, function(d) { return +d.size;})); // [5, 99]

Upvotes: 1

Related Questions