創建旭日接受CSV數據

我也許試圖運行之前，我可以走路，但我用以下兩個引用：創建旭日接受CSV數據

https://bl.ocks.org/mbostock/4063423

從我第一次試圖採用能夠將功能buildHierarchy(csv)的csv文件輸入sunburst的想法。其餘代碼來自Mike Bostock的例子。

我已經收窄數據下來的東西非常簡單如下：

var text = 
    "N-CB,50\n\ 
    N-TrP-F,800\n";

所以我認爲這將產生三個同心環 - 這是做 - 但我希望的是，內環將被拆分在數據中的比例爲800:50。爲什麼我會得到我得到的戒指？

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    #sunBurst { 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 20px; 
 
    width: 250px; 
 
    height: 300px; 
 
    } 
 
    
 
    body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    margin: auto; 
 
    position: relative; 
 
    width: 250px; 
 
    } 
 
    
 
    form { 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 30px; 
 
    } 
 
</style> 
 
<form> 
 
    <label> 
 
    <input type="radio" name="mode" value="size" checked> Size</label> 
 
    <label> 
 
    <input type="radio" name="mode" value="count"> Count</label> 
 
</form> 
 
<script src="//d3js.org/d3.v3.min.js"></script> 
 
<div id="sunBurst"></div> 
 
<script> 
 

 
    var text = 
 
    "N-CB,50\n\ 
 
    N-TrP-F,800\n"; 
 

 

 
    var csv = d3.csv.parseRows(text); 
 
    var json = buildHierarchy(csv); 
 

 

 
    var width = 300, 
 
    height = 250, 
 
    radius = Math.min(width, height)/2, 
 
    color = d3.scale.category20c(); 
 

 
    //this bit is easy to understand: 
 
    var svg = d3.select("#sunBurst").append("svg") 
 

 
    .attr("width", width) 
 
    .attr("height", height) 
 
    .append("g") 
 
    .attr({ 
 
     'transform': "translate(" + width/2 + "," + height * .52 + ")", 
 
     id: "sunGroup" 
 
    }); 
 

 
    // it seems d3.layout.partition() can be either squares or arcs 
 
    var partition = d3.layout.partition() 
 
    .sort(null) 
 
    .size([2 * Math.PI, radius * radius]) 
 
    .value(function(d) { 
 
     return 1; 
 
    }); 
 

 
    var arc = d3.svg.arc() 
 
    .startAngle(function(d) { 
 
     return d.x; 
 
    }) 
 
    .endAngle(function(d) { 
 
     return d.x + d.dx; 
 
    }) 
 
    .innerRadius(function(d) { 
 
     return Math.sqrt(d.y); 
 
    }) 
 
    .outerRadius(function(d) { 
 
     return Math.sqrt(d.y + d.dy); 
 
    }); 
 

 

 

 
    var path = svg.data([json]).selectAll("path") 
 
    .data(partition.nodes) 
 
    .enter() 
 
    .append("path") 
 
    .attr("display", function(d) { 
 
     return d.depth ? null : "none"; 
 
    }) 
 
    .attr("d", arc) 
 
    .style("stroke", "#fff") 
 
    .style("fill", function(d) { 
 
     return color((d.children ? d : d.parent).name); 
 
    }) 
 
    .attr("fill-rule", "evenodd") 
 
    .style("opacity", 1) 
 
    .each(stash); 
 

 

 

 
    d3.selectAll("input").on("change", function change() { 
 
    var value = this.value === "size" ? function() { 
 
     return 1; 
 
    } : function(d) { 
 
     return d.size; 
 
    }; 
 

 
    path 
 
     .data(partition.value(value).nodes) 
 
     .transition() 
 
     .duration(2500) 
 
     .attrTween("d", arcTween); 
 
    }); 
 
    //}); 
 

 
    // Stash the old values for transition. 
 
    function stash(d) { 
 
    d.x0 = d.x; 
 
    d.dx0 = d.dx; 
 
    } 
 

 
    // Interpolate the arcs in data space. 
 
    function arcTween(a) { 
 
    var i = d3.interpolate({ 
 
     x: a.x0, 
 
     dx: a.dx0 
 
    }, a); 
 
    return function(t) { 
 
     var b = i(t); 
 
     a.x0 = b.x; 
 
     a.dx0 = b.dx; 
 
     return arc(b); 
 
    }; 
 
    } 
 

 
    d3.select(self.frameElement).style("height", height + "px"); 
 

 

 
    // Take a 2-column CSV and transform it into a hierarchical structure suitable 
 
    // for a partition layout. The first column is a sequence of step names, from 
 
    // root to leaf, separated by hyphens. The second column is a count of how 
 
    // often that sequence occurred. 
 
    function buildHierarchy(csv) { 
 
    var root = { 
 
     "name": "root", 
 
     "children": [] 
 
    }; 
 
    for (var i = 0; i < csv.length; i++) { 
 
     var sequence = csv[i][0]; 
 
     var size = +csv[i][1]; 
 
     if (isNaN(size)) { // e.g. if this is a header row 
 
     continue; 
 
     } 
 
     var parts = sequence.split("-"); 
 
     var currentNode = root; 
 
     for (var j = 0; j < parts.length; j++) { 
 
     var children = currentNode["children"]; 
 
     var nodeName = parts[j]; 
 
     var childNode; 
 
     if (j + 1 < parts.length) { 
 
      // Not yet at the end of the sequence; move down the tree. 
 
      var foundChild = false; 
 
      for (var k = 0; k < children.length; k++) { 
 
      if (children[k]["name"] == nodeName) { 
 
       childNode = children[k]; 
 
       foundChild = true; 
 
       break; 
 
      } 
 
      } 
 
      // If we don't already have a child node for this branch, create it. 
 
      if (!foundChild) { 
 
      childNode = { 
 
       "name": nodeName, 
 
       "children": [] 
 
      }; 
 
      children.push(childNode); 
 
      } 
 
      currentNode = childNode; 
 
     } else { 
 
      // Reached the end of the sequence; create a leaf node. 
 
      childNode = { 
 
      "name": nodeName, 
 
      "size": size 
 
      }; 
 
      children.push(childNode); 
 
     } 
 
     } 
 
    } 
 
    return root; 
 
    }; 
 
</script>

還有就是這裏plunker進一步活生生的例子：https://plnkr.co/edit/vqUqDtPCRiSDUIwfCbnY?p=preview

來源

2016-10-25 whytheq

你buildHierarchy函數有空格考慮。所以，當你寫

var text = 
    "N-CB,50\n\ 
    N-TrP-F,800\n";

它實際上是兩個根節點：

'N' and '  N'

你有兩個選擇：

使用非空白文本樣

var text = 
    "N-CB,50\n" + 
    "N-TrP-F,800\n";

修復buildHierarchy修剪空白的函數。

來源

2016-10-30 15:00:36 Nixie

哇 - 我沒想到這會成爲問題：明天我會有一場比賽。如果這是我需要改變的一切，那麼我很高興。 – whytheq

如果我改變它說以下在最低級別具有單個成員'F' var text = 「NP-TrdP，750 \ n」+ 「NP-TrdP-F，80 \ n」+ 「NB-TrdB，450 \ n」+ 「NB-CB，900 \ n」 ;'我什麼也沒得到 - 這是爲什麼？我期待它有一個由代表F的小圓弧組成的外環。 – whytheq

這也是因爲'buildHierarchy'函數。您可以嘗試調試它以查看會發生什麼（在第182行中，您將有Uncaught TypeError：無法讀取未定義（...）的屬性'push'） – Nixie

創建旭日接受CSV數據

回答

相關問題