代码之家 › 专栏 › 技术社区 › Aenaon

具有多个json文件的d3.js队列

queue d3.js javascript

Aenaon · 技术社区 · 7 年前

我有一个混乱难看的嵌套json解析调用(!!)我试图简化它,我希望用d3.queue。函数使用第一个json doFirstChart 在一些基本的排版之后做一张图表。该函数生成图表并返回一些额外的数据,这些数据与第二个json文件和另一个用户定义的参数一起使用 doSecondChart

    var c = 'someValue'
    d3.json(countryJson, function (data) {
        data.forEach(function (d) {
            d.Country_Num = +d.Country_Num
            d.y = +d.Y
            d.x = +d.X
        });

       dataOut = doFirstChart(data);

        d3.json(salesJson, function (salesData) {
            salesData.forEach(function (d) {
                d.Expt = +d.Expt
                d.x = +d.x
                d.y = +d.y
            });
            doSecondChart(dataOut, salesData, c)
            console.log("Done!!")
        });
    });

听起来像 d3.queue 是适用于这些情况的适当工具,但即使使用一个简化的示例,我也未能使其工作。例如(忽略exta参数 c )下面是我希望做的伎俩,但显然我没有正确地使用它。

d3.queue()
.defer(d3.json, 'path\to\country\data')
.await(doFirstChart)
.defer(d3.json, 'path\to\sales\data')
.await(doSecondChart)

我甚至连最简单的一点都做不好:

 d3.queue()
 .defer(d3.json, 'path\to\country\data')
 .await(doFirstChart)

1 回复 | 直到 7 年前

Gabriel Balsa Cantú 7 年前

使用推迟之后等待

d3.queue()
  .defer(d3.json, 'path\to\country\data')
  .await(doFirstChart)
  .defer(d3.json, 'path\to\sales\data')
  .await(doSecondChart)

对此:

d3.queue()
  .defer(d3.json, 'path\to\country\data')
  .defer(d3.json, 'path\to\sales\data')
  .await(splitCharts)

功能在哪里 splitCharts(err, ...args)

function splitCharts(err, ...charts){
    doFirstChart(charts[0]);
    doSecondChart(charts[1]);
}

console.log 排队过程,因此您可以从那里开始工作:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
</head>
<body>
    <script>
        function doFirstChart(err, ...args) {
            console.log('[FUNC]: ', args);
        }

        d3.queue()
            .defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
            .defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
            .await(doFirstChart)

    </script>
</body>
</html>

注: .await() 回调,你必须定义 doFirstChart 功能如下:

function doFirstChart(myParam){
   // Now you'll return an anonymous function as first step
   return (err, ...args) => {
      // Here you'll do your thing, like rendering the data
      console.log('My Param: ', myParam); // Your Custom param
      console.log('[FUNC]: ', args); // As before
   }
}

<script></script> 标记到:

<script>
    const paramTest = 'Testa Rossa';
    function doFirstChart(myParam) {
        return (err, ...args) => {
         console.log('My Param: ', myParam);
         console.log('[FUNC]: ', args);
        }
    }

    d3.queue()
        .defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
        .defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
        .await(doFirstChart(paramTest)) // do a first param declaration

</script>