D3.js 清理D3嵌套数据的较低级别_D3.js

D3.js 清理D3嵌套数据的较低级别

d3.js

D3.js 清理D3嵌套数据的较低级别,d3.js,D3.js,我在处理D3嵌套数据时遇到问题。目前，我的代码通过两个变量嵌套数据，leader和competable。然后，代码汇总数据，以获得每个主管调查类别的计数 var summary = d3.nest() .key(function(d) {return d.leader}) .key(function(d) {return d.competent}) .sortKeys(function(a, b) {return scaleValues.indexOf(a) -

我在处理D3嵌套数据时遇到问题。目前，我的代码通过两个变量嵌套数据，

leader

和

competable

。然后，代码汇总数据，以获得每个主管调查类别的计数

var summary = d3.nest()
    .key(function(d) {return d.leader})
    .key(function(d) {return d.competent})
        .sortKeys(function(a, b) {return scaleValues.indexOf(a) - scaleValues.indexOf(b)})
    .rollup(function(l) {return l.length})
    .entries(data)

输出如下所示：

0: {…}
    key: "John"
    values: (2) […]
        0: Object { key: "Agree", value: 3 }
        1: Object { key: "Strongly Agree", value: 6 }
    length: 2
1: {…}
    key: "Emily"
    values: (2) […]
        0: Object { key: "Agree", value: 4 }
        1: Object { key: "Strongly Agree", value: 6 }
    length: 2
length: 2

0: {…}
    key: "John"
    values: (5) […]
        0: Object { key: "Strongly Disagree", values: 0 }
        1: Object { key: "Disagree", values: 0 }
        2: Object { key: "Neutral", values: 0 }
        3: Object { key: "Agree", value: 3 }
        4: Object { key: "Strongly Agree", value: 6 }
    length: 5
1: {…}
    key: "Emily"
    values: (5) […]
        0: Object { key: "Strongly Disagree", values: 0 }
        1: Object { key: "Disagree", values: 0 }
        2: Object { key: "Neutral", values: 0 }
        3: Object { key: "Agree", value: 4 }
        4: Object { key: "Strongly Agree", value: 6 }
    length: 5
length: 2

然后，我清理数据，以确保添加缺少的胜任调查类别，计数为

makeAllKeys = function(d) {
    allKeys = scaleValues
        return allKeys
}

summary = summary.map(function(d) {
    return {
        key: d.key,
        values: makeAllKeys(+d.key).map(function(k) {
            value = d.values.filter(function(v) {return v.key == k})[0]
            return value || ({key: k, values:0})
        })
    }
})

输出现在如下所示：

0: {…}
    key: "John"
    values: (2) […]
        0: Object { key: "Agree", value: 3 }
        1: Object { key: "Strongly Agree", value: 6 }
    length: 2
1: {…}
    key: "Emily"
    values: (2) […]
        0: Object { key: "Agree", value: 4 }
        1: Object { key: "Strongly Agree", value: 6 }
    length: 2
length: 2

0: {…}
    key: "John"
    values: (5) […]
        0: Object { key: "Strongly Disagree", values: 0 }
        1: Object { key: "Disagree", values: 0 }
        2: Object { key: "Neutral", values: 0 }
        3: Object { key: "Agree", value: 3 }
        4: Object { key: "Strongly Agree", value: 6 }
    length: 5
1: {…}
    key: "Emily"
    values: (5) […]
        0: Object { key: "Strongly Disagree", values: 0 }
        1: Object { key: "Disagree", values: 0 }
        2: Object { key: "Neutral", values: 0 }
        3: Object { key: "Agree", value: 4 }
        4: Object { key: "Strongly Agree", value: 6 }
    length: 5
length: 2

现在，我想使用

company

作为键向嵌套添加另一层

var summary = d3.nest()
    .key(function(d) {return d.leader})
    .key(function(d) {return d.company})
    .key(function(d) {return d.competent})
        .sortKeys(function(a, b) {return scaleValues.indexOf(a) - scaleValues.indexOf(b)})
    .rollup(function(l) {return l.length})
    .entries(data)

以下是添加

公司

键后的输出外观：

0: {…}
    key: "John"
        values: (2) […]
            0: {…}
                key: "A"
                values: (2) […]
                    0: Object { key: "Agree", value: 2 }
                    1: Object { key: "Strongly Agree", value: 3 }
                length: 2
            1: {…}
                key: "B"
                values: (2) […]
                    0: Object { key: "Agree", value: 1 }
                    1: Object { key: "Strongly Agree", value: 3 }
                length: 2
        length: 2
1: Object { key: "Emily", values: (2) […] }
length: 2

但是，由于缺少的调查类别在嵌套结构中处于较低的级别，我正在努力修改修复这些类别的代码

下面提供了完整的测试代码和示例数据

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script src="https://d3js.org/d3.v4.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <script type = "text/javascript">

            // Define scales
            var scaleValues = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]
            var scaleValues2 = ["Very Unlikely", "Unlikely", "Neutral", "Likely", "Very Likely"]

            // Import the data
            d3.csv("stackoverflow.csv", function(error, data) {
                if (error) throw error

                var data = data
                    .map(function(d) {return {leader: d.leader, company: d.company, competent: d.competent, personable: d.personable, helpful: d.helpful, recommend: d.recommend}})
                    .filter(function(d) {return d.competent != "NA"})
                    .filter(function(d) {return d.personable != "NA"})
                    .filter(function(d) {return d.helpful != "NA"})
                    .filter(function(d) {return d.recommend != "NA"})
                    .filter(function(d) {return d.leader != "NA"})
                    .filter(function(d) {return d.leader != "I don't remember"})
                data.forEach(function(d) {
                    d.competent = d.competent.replace(/[^a-z0-9+]+/gi, " ")
                    d.personable = d.personable.replace(/[^a-z0-9+]+/gi, " ")
                    d.helpful = d.helpful.replace(/[^a-z0-9+]+/gi, " ")
                    d.recommend = d.recommend.replace(/[^a-z0-9+]+/gi, " ")
                })
                console.log(data)

                makeAllKeys = function(d) {
                    allKeys = scaleValues
                    return allKeys
                }

                var summary = d3.nest()
                    .key(function(d) {return d.leader})
                    // .key(function(d) {return d.company})
                    .key(function(d) {return d.competent})
                        .sortKeys(function(a, b) {return scaleValues.indexOf(a) - scaleValues.indexOf(b)})
                    .rollup(function(l) {return l.length})
                    .entries(data)

                summary = summary.map(function(d) {
                    return {
                        key: d.key,
                        values: makeAllKeys(+d.key).map(function(k) {
                            value = d.values.filter(function(v) {return v.key == k})[0]
                            return value || ({key: k, values:0})
                        })
                    }
                })
                console.log(summary)
            })
        </script>
    </body>
</html>

小改动：

在

summary.map…

中，

d.values

现在将是一个数组（由于

嵌套

中使用了

公司

键），因此您必须在内部映射此

d.values

，就像在上次尝试中那样

下面是更合理的代码更改：

 var summary = d3.nest()
    .key(function(d) {return d.leader})
    .key(function(d) {return d.company})
    .key(function(d) {return d.competent})
        .sortKeys(function(a, b) {return scaleValues.indexOf(a) - scaleValues.indexOf(b)})
    .rollup(function(l) {return l.length})
    .entries(data)
    .map(function(d) {
      return {
        key: d.key,
        values: d.values.map(function (row){ 
          return {
            key: row.key, 
            values: makeAllKeys(+d.key).map(function(k) {
              value = row.values.filter(function(v) {return v.key == k})[0]
              return value || ({key: k, values:0})
            })
          }
        })
    }
})

是的，

.map

可以链接到

d3.nest

本身

现在，

摘要

如下所示：

[  
{  
  "key":"John",
  "values":[  
     {  
        "key":"A",
        "values":[  
           {  
              "key":"Strongly Disagree",
              "values":0
           },
           {  
              "key":"Disagree",
              "values":0
           },
           {  
              "key":"Neutral",
              "values":0
           },
           {  
              "key":"Agree",
              "value":2
           },
           {  
              "key":"Strongly Agree",
              "value":3
           }
        ]
     },
     {  }
  ]
},
{  
  "key":"Emily",
  "values":[  ]
 }
]

这里有一个plunkr链接供参考：

希望这有帮助。

在嵌套操作后，您是否查看了您的

摘要

？是的，在这两种情况下（2键和3键）都正常。我将在问题中举例说明。如果您成功地在1个级别上执行此操作，那么第2个级别的嵌套会有什么问题？我尝试了多种方法修改代码，以修复丢失的调查类别，但我尝试引用较低级别的值却不起作用。例如，我不能简单地说

d.values.key

来引用公司密钥，就像我使用

d.key

来引用领导者密钥一样。因此，我的

summary.map（）

函数只有在

competable

调查值处于嵌套的第二级时才起作用。然后我建议阅读一本关于JavaScript的好书/网站，看看该语言的其他特性。很高兴我能提供帮助！是的，你不必仅仅为了这个而阅读书籍/网站（除了自学之外）：p您在这方面做得很好，只是练习添加更多控制台日志和断点（使用浏览器调试器），这非常有帮助。快乐编码！