Question

免责声明：我对D3非常陌生，所以我确定这是可能的，但我们还没想出要搜索出来的东西。

我尝试使用D3从一个充满嵌套JSON对象/数组的大型数组中创建可视化。为了举例，让我们说我的对象看起来像这样：

var arr = [
    {
        "name":"John",
        "info":[
            {
                "age":31,
                "height":6,
                "weight":155,
                "eyes":"green"
            },
            {
                "age":35,
                "height":6,
                "weight":165,
                "eyes":"green"
            }
        ]
    },
    {
        "name":"Eric",
        "info":[
            {
                "age":29,
                "height":5,
                "weight":135,
                "eyes":"brown"
            },
            {
                "age":30,
                "height":5,
                "weight":155,
                "eyes":"brown"
            }
        ]
    }
]

现在，假设我想获取这些数据并将其可视化，但需要使用更多div来进行样式设置，而不是对象的嵌套级别。所以，我希望代码看起来像这样：

<div>
    <h1>John</h1>
    <div>
        <div>
            <div>
                <h2>Age:31</h2>
                <div>
                    <p>Weight:155</p>
                </div>
            </div>
            <div>
                <h2>Age:35</h2>
                <div>
                    <p>Weight:165</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <h1>Eric</h1>
    <div>
        <div>
            <div>
                <h2>Age:29</h2>
                <div>
                    <p>Weight:135</p>
                </div>
            </div>
            <div>
                <h2>Age:30</h2>
                <div>
                    <p>Weight:155</p>
                </div>
            </div>
        </div>
    </div>
</div>

现在，如果我没有额外的div，那么使用起来相当简单

var visualization = d3.select("body").selectAll("div")
    .data(arr)
    .enter()
    .append("div");

var person = visualization.selectAll("h1")
    .data(function(d){return(d.name)}
    .enter()
    .append("h1")
    .text(function(d){return d});

然后我可以用div做同样的事情并通过d.info循环来创建我需要的东西。但是，当我追加嵌套的div时，我不能再使用父节点的数据来循环，并且似乎无法在.data（）的自动循环中找到父div的索引。

真的，我希望能够做的是根据arr []的长度创建div，添加一些信息，如＆＃34; name＆＃34;到那个div，然后将一些div作为样式目的附加到根div，然后再回到那个根div的数据进行循环。我想用D3来做这个，因为我知道这是它的内容，但是在这一点上，我已经准备好使用for循环强制它，我知道索引I＆＃39; m in并且可以在更多嵌套数据上使用它。希望这是有道理的，但我完全坚持如何使用D3正确地做到这一点。

请问这些是否有任何不清楚 - 真的希望得到这个。谢谢！

Answer 1

我不确定我完全理解你的问题。使用该数据复制您想要的结构并不困难。您可以根据需要添加任意数量的图层，并继续访问父数据：

RESTORE DATABASE BbCon FROM DISK='C:\\Users\\Public\\aa.Bak' WITH REPLACE,
move 'BBCon' to 'c:\temp\BBCon.mdf',
move 'BBCon_log' to 'c:\temp\BBCon_log.ldf';

如何使用D3处理重度嵌套的对象

1 个答案: