D3js - 从“JSON数据”中获取折线图输入使用d3.json [英] D3js - Getting a line chart drawn, from "JSON data" input using d3.json

问题描述

我最近开始学习D3.js，遇到一些问题..
这里是我到目前为止试过：

I recently started studying D3.js and came across some issues.. Here's what i have tried out so far :

这里是我的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文件。
我实际上得到了输出，
这是我当前的输出，我收到：

I want the line to be displayed from the data that is retrieved from the JSON file. I actually got the output, This is my current output that am receiving:

但问题是，我想让这更动态。
例如，如果JSON中有有更多数据。

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

The JSON could go from x1,y1 to xn,yn...(Similar to the format in the JSON above)

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

所以我的问题是：

1. strong>（即：不考虑JSON中的数据量，应在图表上反映所需的图表）


2. 是 JSON的数据格式使用 D3.json 输入到D3js是一个问题？ （或者D3.json究竟需要什么格式，而且是严格的？）

1. How can this be made dynamic(ie: Irrespective of the amount of data within the JSON,it should reflect on the chart with the required graphs)
2. Is the data format of the JSON that is inputted to the D3js using D3.json gonna be a problem? (Or what exactly is the format required for the D3.json and is it strict?)

推荐答案

p>让你的json数据结构像这样

Let your json data structure be like this

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

代码

$ b b

Code

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轻松处理。

This is the right way of creating a multi line chart. Whatever the data format you get from json, you can convert it to the required format using Javascript array functions. You can also use Underscore.js for easy processing.

这篇关于D3js - 从“JSON数据”中获取折线图输入使用d3.json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！