d3.js树 - 节点的CSV属性

时间：2015-04-15 12:19:24

标签： javascript csv d3.js tree

我试图对我提取为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",,

这会生成一个看起来像这样的树 D3 Tree CSV

我的问题是我需要每个机器的孩子（例如，＃ebo - Web-GB＆＃34;）都有一个单独的节点（名称，URL模板，页面开始，页面大小， Max Pages等）。 但是使用text属性，虽然我可以返回所有这些属性，但它们都与逗号分隔符一起返回，而不是作为单独的节点返回。

我已将代码加载到JSFiddle，但似乎无法使其正常运行。

任何帮助都将不胜感激。

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

2 个答案:

答案 0 :(得分：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）：

enter image description here

答案 1 :(得分：0)

var pre_data = d3.csv.parse(d3.select("pre#data").text());

//document.getElementsByTagName("BODY")[0].innerHTML = data;

var margin = {
    top: 20,
    right: 120,
    bottom: 20,
    left: 120
},
width = 1000 - 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];
});

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);


    //var nested_data = _.nest(csv_data, "Machine");
    //var nodes = tree.nodes(nested_data);
    var flare_data = {};
    var nested_data = d3.nest()
        .key(function (d) {
        return d['Machine'];
    })
        .key(function (d) {
        return d['Name'];
    })
        .entries(pre_data);
    flare_data.key = "Flare";
    flare_data.values = nested_data;
    flare_data = reSortFlare(flare_data);
    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)
        .on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", .9);
        div.html(
            "Name: " + (d.name?d.name:d["URL Template"]+(d.xPath.replace("//","/"))) + "<br/>" +
            "URL Template: " + d['URL Template'] + "<br/>" +
            "Page Start: " + d['Page Start'] + "<br/>" +
            "Page Size: " + d['Page Size'] + "<br/>" +
            "Max Pages: " + d['Max Pages'] + "<br/>" +
            "xPath:&nbsp" + d['xPath'] + "<br/>" +
            "RegEx: " + d['RegEx'] + "<br/>" +
            "eCommerce: " + d['eCommerce'] + "<br/>" +
            "Search Interval: " + d['Search Interval'] + "<br/>" +
            "Additional Variable: " + d['Additional Variable'] + "<br/>" +
            "Variable Value: " + d['Variable Value'] + "<br/>")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
    })
        .on("click", function (d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    });

    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['Name'];
      return d.children ? d.name : d["URL Template"]+(d.xPath.replace("//","/"));
    });


function reSortFlare(d) {
    //console.log("Calling");
    for (var key in d) {
        if (key == "key") {
            d.name = d.key;
            delete d.key;
        }
        if (key == "values") {
            d.children = [];
            for (var item in d.values) {
                d.children.push(reSortFlare(d.values[item]));
            }
            delete d.values;
        }
    }
    return d;
}
  .node circle {
      fill: #fff;
      stroke: #4B9FC3;
      stroke-width: 3px;
  }
  .node {
      font: 12px sans-serif;
  }
  .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2x;
  }
  div.tooltip {
      position: absolute;
      text-align: left;
      width: 500px;
      height: 200px;
      padding: 2px;
      font: 12px sans-serif;
      background: lightsteelblue;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
  }
  pre {
      display:none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
    <pre id="data">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",,</pre>
</body>

我认为你正在寻找这个，如果不是问我更多......

相关问题
最新问题