javascript - d3.js 树 - 节点的 CSV 属性

Question

我正在尝试对我提取为 csv 的文件进行可视化表示。但我似乎在 d3 Tree 所期望的结构上碰壁了。

我的代码:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="mydata.csv"></script>
<script>
  var margin = {top: 20, right: 120, bottom: 20, left: 120},
  width = 800 - margin.right - margin.left,
  height = 500 - margin.top - margin.bottom;

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

  var tree = d3.layout.tree()
  .size([height, width]);

  var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

d3.csv("mydata.csv", function(data) {

    var nested_data = d3.nest()
      .key(function(d) { return d['Machine']; })
      .key(function(d) { return d['Name']; })
      .entries(data);

    flare_data.key = "Flare";
    flare_data.values = nested_data;
    flare_data = reSortFlare(flare_data); //Turns Key Values into Name Children which D3 Tree expects

  var nodes = tree.nodes(flare_data);

  var link = canvas.selectAll(".link")
    .data(tree.links(nodes))
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

  var node = canvas.selectAll(".node")
    .data(nodes)
    .enter()
    .append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  node.append("circle")
    .attr("r", 7);

  node.append("text")
    .attr("dx", function(d) { return d.children ? -15 : 15; })
    .attr("dy", 3)
  .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.children ? d.name : [d['URL Template'], d['xPath']]; });
  });

   function reSortFlare(root) {
     //console.log("Calling");
     for (var key in root) {
       if (key == "key") {
         root.name = root.key;
         delete root.key;
       }
       if (key == "values") {
         root.children = [];
         for (item in root.values) {
           root.children.push(reSortFlare(root.values[item]));
         }
         delete root.values;
       }
     }
     return root;
   }
</script>

我的 CSV 文件示例:

Machine,Name,URL Template,Page Start,Page Size,Max 
Pages,xPath,RegEx,eCommerce,Search Interval,Additional Variable,Variable Value
"Machine [1]","eSearch - Web-GB","http://example.com/status","1","1","10","//somethingness","([0-9]{1,20})","1","0","Thum","true"
"Machine [1]","eSearch - Web-GB","http://forexample.com/randomness","1","1","10","//nothingness","([0-9]{1,20})","1","0","Kapool","true"
"Machine [1]","Web: Web-US","http://mangasite.com/mangacomic","1","1","10","//itemId","([0-9]{1,20})","1","0","Crawl Natural URL","true"
"Machine [1]","Web: Web-US","http://someothersite.fr/kapala","1","1","10","//itemId","([0-9]{1,20})","1","0","Block Sellers","true"
"Machine [1]","Link Test","http://kistergans.com/papals","0","1","1","//a/@href","(.*)","0","0",,
"Machine [1]","TW Search","https://mankini.jp/ofcourse","0","100","1","//a/@href","(.*/status/.*)","0","0",,
"Machine [1]","TW API","http://storagewars.com","0","1","1","//a/@href","(http.*)","0","0",,
"Machine [1]","Amiz Metaquery","http://www.Amiz.com/s/","1","10","1","//a[contains]/@href","(http://www\.Amiz\.com/","0","0",,
"Machine [1]","Amiz Metaquery Too","http://www.Amiz.de/s/?field-keywords=%q&page=%i","1","1","10","//div/@href","http://www.Amiz.de/).*","0","0",,
"Machine [2]","Subs.com","https://www.subs.com/search?f=%q&p=%i","0","1","10","//dt/a/@href","((https?://[^/]+)?/[^/\+]{10,500})","0","0",,
"Machine [2]","Extra.cc","http://extra.cc/search/","1","1","10","//a/@href","([^#]+)","0","0",,
"Machine [2]","Monitoring","http://monitoring.com/nothing","1","1","1","//nothing","(.*)","0","0",,
"Machine [2]","SM - abe.com - users","http://s.weibo.com/user/lamborghini","1","1","1","//div[@class=""person_detail""]/p[@class=""person_addr""]/a/@href","(.*)","0","0",,
"Machine [2]","SM - koko.com","http://i.youku.com/u_search/?page=%i&q=%q","1","1","10","//li[@class=""u_title""]/a/@href","(http://i.youku.com/u/.+)","0","0",,
"Machine [2]","Amiz.com Page","http://www.Amiz.com/s/?field-keywords=%q&page=%i","1","1","5","//div[@id=""rightResultsATF""]//@href","/dp/([^/]+)/.*","1","0",,
"Machine [3]","MA: Apple.com (iTunes)","http://software.com/aabc","0","200","1","//iTunesApp/trackViewUrl","(@keli)","1","0",,
"Machine [3]","MA: Wipple.com","http://kalamaza.ck/keywords","0","48","5","//a/@href","(http://abc.ck)","0","0",,
"Machine [3]","SM: Linkage.com ","http://stormborn.com/lalala","0","100","5","//a/@href","(lililo+)","0","0",,
"Machine [3]","SM: Afro.com - via SearchTool","http://lipidi.li/lili","0","1","1","//a/@href","(.*/status/[0-9]+)","0","0",,
"Machine [3]","SM: Afro.com","http://sazdarma.ka/yoyo","0","1","1","//a/@href","(.*/status/[0-9]+)","0","0",,

这会产生一棵看起来像这样的树

我的问题是，我需要每台机器的子节点(例如“eSearch - Web-GB”)有一个单独的节点(名称、URL 模板、页面开始、页面大小、最大页面等)。但是使用文本属性，虽然我可以返回所有这些属性，但它们都是与逗号分隔符一起返回的，而不是作为单独的节点返回的。

我已将代码加载到 JSFiddle 中，但似乎无法让它工作。

如有任何帮助，我们将不胜感激。

此外，是否有更简单的方法将 CSV 转换为正确的 JSON 格式？

Answer 1

首先，您不需要 reSortFlare 函数。这可以通过更改 children accessor function 来实现.

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

其次，我相信您可以使用 .rollup 完成您需要的操作:

  var nested_data = d3.nest()
    .key(function(d) {
      return d['Machine'];
    })
    .key(function(d) {
      return d['Name'];
    })
    .rollup(function(d){
      var children = [];
      d.forEach(function(dSub){
        for (var k in dSub){
                if (k == 'URL Template' || k == 'xPath')
                    children.push({'key': dSub[k]})
          }
      })
      return children;
    })
    .entries(data);

这会产生(例如 code here ):