javascript - Sunburst Chart - 添加额外的数据层

标签 javascript json d3.js graph

我正在学习本教程:

https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601

它工作正常,但只有两个“环”数据。我想补充第三个。它使用以下数据从 data.json 文件中提取数据:

{

    "name": "TOPICS", "children": [{
        "name": "Topic A",
        "children": [{"name": "Sub A1", "size": 5, "text": "A story", "sentiment": 1, "source": "dictionary"},
            {"name": "Sub A2", "size": 5, "text": "A note", "sentiment": 0.5, "source": "dictionary"}]
    }, {
        "name": "Topic B",
        "children": [{"name": "Sub B1", "size": 5, "text": "A vignette", "sentiment": 1, "source": "newspaper"},
            {"name": "Sub B3", "size": 5, "text": "A joke", "sentiment": 0.5, "source": "email"}]
    }, {
        "name": "Topic C",
        "children": [{"name": "Sub A1", "size": 5, "text": "A narrative", "sentiment": 1, "source": "newspaper"},
            {"name": "Sub A2", "size": 5, "text": "A chronology", "sentiment": 0.5, "source": "email"}]
    }]
}

我的问题是,如何在外部添加第三个数据环?这似乎是 JSON 格式,但我无法理解它。

最佳答案

鉴于您共享的特定 bl.ocks,您需要做的就是在您希望成为新层父级的项目中创建一个 children 数组,并删除 size 父属性:

例如,在 Sub A1 中创建一个新层:

{
    "name": "TOPICS",
    "children": [{
        "name": "Topic A",
        "children": [{
            "name": "Sub A1",
            "text": "A story",
            "sentiment": 0.8,
            "source": "dictionary",
            "children": [{
                "name": "New Layer 1",
                "size": 5,
                "text": "A story",
                "sentiment": 0.8,
                "source": "dictionary"
            },{ 
            ...etc
            }]
        }, {
            "name": "Sub A2",
            "size": 5,
            "text": "A note",
            "sentiment": 0.3,
            "source": "dictionary"
        }]
    },{
    ...etc
    }]
}

我只是复制/粘贴到这里...当然,您必须相应地调整值。

这是更新的 bl.ocks:https://bl.ocks.org/GerardoFurtado/7c30efbc20232abda294cd71a959c79d/f211ca864503860dfa181c5e9e142e38897abb56

关于javascript - Sunburst Chart - 添加额外的数据层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49846845/

相关文章:

json - JSON.parse()在Chrome上崩溃

javascript - 计算 d3 js 中 csv 数据集的文本字段数

javascript - JSON 输出未正确显示,javascript

javascript - 除了 ECMAScript 规范中提供的上下文无关语法之外,是否还有其他方法可以将 JavaScript 词法化为 token ?

java - 如何在 Java 或 Kotlin 中解析具有键的 JSON 映射

php - 将 JSON 数据发布到外部 URL

D3.js 在鼠标悬停事件上获取形状的数据索引

d3.js - 力有向图中可能有双向箭头吗?

javascript - Nightmare JS 中 click() 和 wait() 之后获取 POST 请求 header

javascript - 循环内的 Ajax 调用需要顺序响应