D3從樹狀圖flare.csv過濾根數據

我有以下csv格式的數據保存到一個名爲csvData的變量，我試圖只顯示它的某些部分。變量的格式是這樣的...D3從樹狀圖flare.csv過濾根數據

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'

我能夠通過拉像這樣顯示的樹形圖中的所有數據...

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部分。

來源

2016-10-04 Layne

相反的root.leaves()你應該使用：

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

或者

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

也就是說，找到根了「分析」的孩子，並得到它的葉子。

來源

2016-10-05 04:37:29 Marcelo

如果我不能使用箭頭功能怎麼辦？我已經嘗試了巴貝爾翻譯，但無法讓它工作。 root.children.find（function（e）{ return e.id ===「flare.analytics」; }）; – Layne

@Layne - 我編輯了答案。我忘了叫葉子的方法。希望這個幫助。 – Marcelo

我沒有忘記你。只要我可以測試這個，我會檢查它。謝謝你的幫助。 – Layne

D3從樹狀圖flare.csv過濾根數據

回答

相關問題