如何进行多个api调用以在d3图表中显示单个数据

Question

我正在尝试使用d3在图表中显示数据,方法是使用相同的数据但不同的日期进行2次单独的api调用.

第一次api电话:

 var data1 = {     'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate1,
                   'endDate':   endDate1,
                   'tz':        getTimezoneOffset() };


var data2: {        'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate2,
                   'endDate':   endDate2,
                   'tz':        getTimezoneOffset() };

我正在尝试拨打电话并按如下方式显示图表:

粗线表示一组,start and end dates (startDate1 and endDate1)虚线表示第二组start and ends dates(startDate2 and endDate2).

我试过这个:

draw: function(){
   getData();
   getData2();
},
getData: function() {
    var self = this;
    self.showLoading();
    $.get('url', data1, function(response) {
       console.log("success" + response);
    });
},
 getData2: function() {
    var self = this;
    self.showLoading();
    $.get('url', data2, function(response) {
       console.log("success" + response);
    });
}

然而,这对我来说根本不起作用......它只在图表中显示一个数据信息.

编辑:::::这是我尝试使用下面给出的ex:我有休息调用以这种格式返回数据:所有数据类似,除了日期..

data: //returns
  Object {sale: "202", year: "2000", date: "12"}


data2: //returns
 Object {sale: "202", year: "2000", date: "24"}

现在,当我尝试访问时lineGen(data),它返回null.

http://jsfiddle.net/nv4x78t6/

我看到没有显示数据......

Answer 1

您有两个数据集和两条线。这意味着您希望使用 data1 绘制一条路径，并使用 data2 绘制另一条路径。

这是一个例子。最后，他只是将第二个 svg:path 附加到图表并在其上绘制 data2。

http://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js--cms-22935

在您的情况下，您可能想要预先插入两个路径，并向其中添加类，例如“seriesOneLine”和“seriesTwoLine”。然后始终将“getData”响应绘制到“seriesOneLine”中，并始终将“getData2”绘制到“seriesTwoLine”中。

如果没有看到您的一些渲染代码，我真的无法更具体。

编辑（问题更新后）

您的小提琴数据是两个系列，每个系列有一个数据点。您正在尝试绘制带有单个点的折线图。我将你的数据更改为：

                var data = [{
                    "sale": "202",
                    "year": "2000",
                },{
                    "sale": "200",
                    "year": "2001"
                }];
                var data2 = [{
                    "sale": "202",
                    "year": "2000",
                }, {
                    "sale": "140",
                    "year": "2001"
                }];

两条线出现了。