Блог

У меня есть следующие данные в формате csv, сохраненные в вызываемой переменной csvData , и я пытаюсь показать только определенные их части. Переменная форматируется следующим образом …

 var csvData = 'id,value
flare,
flare.analytics,
flare.analytics.cluster,
flare.analytics.cluster.AgglomerativeCluster,3938
flare.analytics.cluster.CommunityStructure,3812
flare.analytics.cluster.HierarchicalCluster,6714
flare.analytics.cluster.MergeEdge,743
flare.analytics.graph,
flare.analytics.graph.BetweennessCentrality,3534
flare.analytics.graph.LinkDistance,5731
flare.analytics.graph.MaxFlowMinCut,7840
flare.analytics.graph.ShortestPaths,5914
flare.analytics.graph.SpanningTree,3416
flare.analytics.optimization,
flare.analytics.optimization.AspectRatioBanker,7074
flare.animate,
flare.animate.Easing,17010
flare.animate.FunctionSequence,5842
flare.animate.interpolate,
flare.animate.interpolate.ArrayInterpolator,1983
flare.animate.interpolate.ColorInterpolator,2047
flare.animate.interpolate.DateInterpolator,1375
flare.animate.interpolate.Interpolator,8746
flare.animate.interpolate.MatrixInterpolator,2202
flare.animate.interpolate.NumberInterpolator,1382
flare.animate.interpolate.ObjectInterpolator,1629
flare.animate.interpolate.PointInterpolator,1675
flare.animate.interpolate.RectangleInterpolator,2042
flare.animate.ISchedulable,1041
flare.animate.Parallel,5176
flare.animate.Pause,449
flare.animate.Scheduler,5593
flare.animate.Sequence,5534
flare.animate.Transition,9201
flare.animate.Transitioner,19975
flare.animate.TransitionEvent,1116
flare.animate.Tween,6006'
  

Я могу отобразить все данные в treemap, вставив их вот так…

 var stratify = d3.stratify()
    .parentId(function(d) {
        return d.id.substring(0, d.id.lastIndexOf("."));
    });

var treemap = d3.treemap()
    .size([width, height])
    .padding(1)
    .round(true);

var data = d3.csvParse(csvData, function(d) {
    return {
        id: d.id, // lowercase
        value:  d.value // lowercase
    };
});

var root = stratify(data)
    .sum(function(d) {
        return d.value;
    })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

treemap(root);
  

А затем использует .data(root.leaves()) вот так…

 d3.select("#treeChart")
    .selectAll(".node")
    .data(root.leaves())
    .enter().append("div")
    .attr("class", "node")
    //... more stuff here ...
  

Но это показывает все, и я просто хочу показать analytics часть, а НЕ animate часть. Из того, что я собрал, мне нужно отфильтровать корневые данные, но я не уверен, как это сделать. В конце концов, я хотел бы иметь выпадающий список, который переключается между analytics и animate , но это становится вторым сообщением. Итак, я начинаю с показа начальной analytics части.

Вместо root.leaves() того, чтобы вы должны использовать:

 root.children.find( e => e.id === "flare.analytics").leaves()
  

Или

 root.children.find( function(e) { return e.id === "flare.analytics";}).leaves()
  

То есть найдите дочерний элемент «analytics» из root и получите его листья.