Question

我最近开始研究D3.js并遇到了一些问题.. 以下是我到目前为止所尝试的内容：

这是我的JS ：

    d3.json("../js/sample2.json", function(data) {
    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500)
            .attr("border", "black")

    var group = canvas.append("g")
            .attr("transform", "translate(100,10)")

    var line = d3.svg.line()
            .x(function(d, i) {
                return data[0].position[i];
            })
            .y(function(d, i) {
                return data[1].position[i];
            });

    var line1 = d3.svg.line()
            .x(function(d, i) {
                return data[2].position[i];
            })
            .y(function(d, i) {
                return data[3].position[i];
            });

    var j = 0;
    group.selectAll("path")
            .data(data).enter()
            .append("path")
//    Have to provide where exaclty the line array is ! (line(array)) 
            .attr("d", line(data[j].position))
            .attr("fill", "none")
            .attr("stroke", "green")
            .attr("stroke-width", 3);

    var group2 = group.append("g")
            .attr("transform", "translate(100,10)")
    group2.selectAll("path")
            .data(data).enter()
            .append("path")
//    Have to provide where exaclty the line array is ! (line(array)) 
            .attr("d", line1(data[j].position))
            .attr("fill", "none")
            .attr("stroke", "red")
            .attr("stroke-width", 3);
});

这是我的JSON文件：

   [ {"name": "x1", 
      "position":[40,60,80,100,200]
     },

     {"name": "y1", 
      "position":[70,190,220,160,240]},

     {"name": "x2", 
      "position":[40,60,80,100,200]
     },

     {"name": "y2", 
      "position":[20,90,20,60,40]}
]

我希望从 JSON文件中检索的数据中显示该行。 我实际得到了输出，这是我目前收到的输出： enter image description here

但问题是，我希望这更具活力。例如，如果在JSON中有更多数据。

JSON可以来自 x1，y1到xn，yn ...（类似于上面JSON中的格式）

[ {"name": "x1", 
      "position":[40,60,80,100,200]
     },
 {"name": "y1", 
  "position":[70,190,220,160,240]
  },

 {"name": "x2", 
  "position":[40,60,80,100,200]
 },

 {"name": "y2", 
  "position":[20,90,20,60,40]}
.
.
.
.    


{"name": "xn", 
  "position":[40,60,80,100,200]
 },

 {"name": "yn", 
  "position":[20,90,20,60,40]}]

所以我的相关问题是：

如何做到动态（即：无论JSON中的数据量如何，它都应该反映在带有所需图表的图表上）
使用 D3.json 输入到D3js的数据格式会是个问题吗？（或者D3.json所需的格式到底是什么，是严格的吗？）

Answer 1

让你的json数据结构像这样

[
 [
  {
     "x":40,
     "y":70
  },
  {
     "x":60,
     "y":190
  },
  {
     "x":80,
     "y":220
  },
  {
     "x":100,
     "y":160
  },
  {
     "x":200,
     "y":240
  }
 ],
 [
  {
     "x":40,
     "y":20
  },
  {
     "x":60,
     "y":90
  },
  {
     "x":80,
     "y":20
  },
  {
     "x":100,
     "y":60
  },
  {
     "x":200,
     "y":40
  }
 ]
]

代码

d3.json("data.json", function(data) {
   var canvas = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("border", "black")

   var group = canvas.append("g")
        .attr("transform", "translate(100,10)")

   var line = d3.svg.line()
        .x(function(d, i) {
            return d.x;
        })
        .y(function(d, i) {
            return d.y;
        }); 

   group.selectAll("path")
        .data(data).enter()
        .append("path")
        .attr("d", function(d){ return line(d) })
        .attr("fill", "none")
        .attr("stroke", "green")
        .attr("stroke-width", 3);
});

这是创建多线图的正确方法。无论您从json获得什么数据格式，都可以使用Javascript数组函数将其转换为所需的格式。您也可以使用Underscore.js进行简单处理。

Answer 2

让JSON文件像这样

[
"line": [
{"name": "x1", 
      "position":[40,60,80,100,200]
 },

{"name": "y1", 
  "position":[70,190,220,160,240]
},
.
.
.
.
.

]

]

并获得此“线”的长度在forloop中运行它.. 希望能解决

D3js - 使用d3.json从“JSON数据”输入中获取折线图

2 个答案:

代码