气泡图用JSON代替CSV [英] JSON instead of CSV for bubble chart

问题描述

我正在使用从csv文件获取输入的气泡图，有没有办法使用JSON?

I'm using bubble chart which takes input from csv file, is there a way to use JSON instead?

这是问题网址: http://ec2-54-198- 148-171.compute-1.amazonaws.com/webapp/provider-view

问题代码:

d3.csv(flare.csv, function(d) {

//console.log(d);
  d.value = +d.value;
   d.seq = +d.seq;
  if (d.value) return d;
}, function(error, classes) {
  if (error) throw error;

  var root = d3.hierarchy({children: classes})
      .sum(function(d) { return d.value; })
      .each(function(d) {
        if (id = d.data.id) {
          var id,seq, i = id.lastIndexOf(".");
          d.id = id;//console.log(i + "  " + id);
          d.package = id.slice(0, i);//console.log(d.package);
          d.class = id.slice(i + 1);
          d.seq = d.data.seq;
        }
      });

  var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
      if(d.seq==1){
      d.x = d.x - 100;
          d.y = d.y + 20;
       return "translate(" + d.x + "," + d.y + ")";
      }else{
      d.x = d.x + 500;
            d.y = d.y + 20;
      return "translate(" + d.x + "," + d.y + ")";
       }      });

  node.append("circle")

      .attr("id", function(d) { return d.id; })
      .attr("r", function(d) { d.r = parseInt(d.r)-5; return d.r; })
      .attr("onclick",function(d) { return "demo('" +d.id + "',"+ d.seq+","+ (d.x+d.r+111)+","+ (d.y+100-30)+");"; })
      .style("fill", function(d) { //console.log(d.seq);
      if(d.seq==1){
       return "url(#gradient1)";
      }else{
      return "#773F9B";
       }    

      });

  node.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.id; });

  node.append("div")
        .attr("id","tooltip")
       .attr("style","width:100px;height:10px;background-color:gray;z-index:1000");

});

csv示例:

id,value,seq
demo11,100,1
demo12,200,1
demo13,300,1
demo14,400,1
demo15,500,1
demo16,600,1
demo17,600,1
demo21,50,2
demo22,100,2
demo23,150,2
demo24,200,2
demo25,250,2
demo26,300,2
demo27,350,2

推荐答案

简短的答案是:是的.

长答案:将数据从csv文件更改为json文件，这不仅仅是将d3.csv更改为d3.json的问题.正如@RobertLongson在评论.但是，除此之外，您还必须了解d3.csv如何使用CSV创建对象数组，因为您需要创建模仿该数组的JSON.

The long answer: to change the data from a csv file to a json file, it's not simply a matter of changing d3.csv for d3.json. That's necessary, of course, as @RobertLongson said in the comments. But, besides that, you'll have to understand how d3.csv creates an array of objects with your CSV, since you need to create your JSON mimicking that array.

因此，给定您的CSV，这是d3.csv创建对象数组的方式:

So, given your CSV, this is how d3.csv creates an array of objects:

var data = d3.csvParse(d3.select("#csv").text());

console.log(JSON.stringify(data))

pre {
	display: none;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">id,value,seq
demo11,100,1
demo12,200,1
demo13,300,1
demo14,400,1
demo15,500,1
demo16,600,1
demo17,600,1
demo21,50,2
demo22,100,2
demo23,150,2
demo24,200,2
demo25,250,2
demo26,300,2
demo27,350,2</pre>

也就是说，要将您的数据从CSV更改为JSON(无需在代码中进行任何进一步更改)，您的JSON需要具有以下确切的结构:

That being said, to change your data from CSV to JSON (without doing any further change in the code), your JSON need to have exactly this structure:

[{
    "id": "demo11",
    "value": "100",
    "seq": "1"
}, {
    "id": "demo12",
    "value": "200",
    "seq": "1"
}, {
    "id": "demo13",
    "value": "300",
    "seq": "1"
}, {
    "id": "demo14",
    "value": "400",
    "seq": "1"
}, {
    "id": "demo15",
    "value": "500",
    "seq": "1"
}, {
    "id": "demo16",
    "value": "600",
    "seq": "1"
}, {
    "id": "demo17",
    "value": "600",
    "seq": "1"
}, {
    "id": "demo21",
    "value": "50",
    "seq": "2"
}, {
    "id": "demo22",
    "value": "100",
    "seq": "2"
}, {
    "id": "demo23",
    "value": "150",
    "seq": "2"
}, {
    "id": "demo24",
    "value": "200",
    "seq": "2"
}, {
    "id": "demo25",
    "value": "250",
    "seq": "2"
}, {
    "id": "demo26",
    "value": "300",
    "seq": "2"
}, {
    "id": "demo27",
    "value": "350",
    "seq": "2"
}] 

这篇关于气泡图用JSON代替CSV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！