Question

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

以下是问题网址： 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

Answer 1

简短的回答是：是的。

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

因此，根据您的CSV，这就是d3.csv创建对象数组的方式：

＆＃13;

var data = d3.csvParse(d3.select("#csv").text());

console.log(JSON.stringify(data))

＆＃13;

pre {
	display: none;
}

＆＃13;

<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>

＆＃13;

话虽这么说，要将数据从CSV更改为JSON（不对代码进行任何进一步更改），您的JSON需要具有这种结构：

[{
    "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

1 个答案: