Jquery树映射未显示所有节点_Jquery_Treemap

Jquery树映射未显示所有节点

jquery

Jquery树映射未显示所有节点,jquery,treemap,Jquery,Treemap,下面是创建树映射的代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

下面是创建树映射的代码

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.treemap.js"></script>
    </head>
    <body>

    <div id="treemap"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#treemap").treemap({
                "nodeData": {
                    id: "root", "children": [
                        {
                            id: "NY",
                            size: [.8],
                            color: [1]
                        },
                        {
                            id: "NA",
                            size: [.8],
                            color: [1]
                        },
                        {
                            id: "SP",
                            size: [.6],
                            color: [1]
                        },
                        {
                            id: "NQ",
                            size: [.6],
                            color: [1]
                        },
                        {
                            id: "V",
                            size: [.6],
                            color: [1]
                        },
                        {
                            id: "R",
                            size: [.4],
                            color: [1]
                        },
                        {
                            id: "DJ",
                            size: [.4],
                            color: [1]
                        },
                        {
                            id: "BY",
                            size: [.6],
                            color: [1]
                        },
                    ]
                }
            });
        });
    </script>

    </body>
    </html>


$（文档）.ready（函数（）{
$（“#treemap”）。treemap({
“野田”：{
id:“根”，“子项”：[
{
id:“纽约”，
大小：[.8]，
颜色：[1]
},
{
id:“不适用”，
大小：[.8]，
颜色：[1]
},
{
id:“SP”，
尺寸：[.6]，
颜色：[1]
},
{
id:“NQ”，
尺寸：[.6]，
颜色：[1]
},
{
id:“V”，
尺寸：[.6]，
颜色：[1]
},
{
id:“R”，
大小：[.4]，
颜色：[1]
},
{
id:“DJ”，
大小：[.4]，
颜色：[1]
},
{
id:“由”，
尺寸：[.6]，
颜色：[1]
},
]
}
});
});

当我运行这个页面时，我只能看到两个条NY和NA，其他条没有显示，不知道为什么会这样。我是第一次使用treemap，所以实际上并不清楚所有的概念。我使用了他们的样本，它可以工作，但当我根据我的要求进行更改时，它不会显示

请告知为什么不显示其他节点？

在nodeData中，大小数据的总和应为1。在你的问题中，总和大于1。这就是为什么您只得到前两部分（NY size.8和NY size.2/8（.6的NA不可见））。如果给大小的值加一个和1，问题就会解决

$（文档）.ready（函数（）{
$（“#treemap”）。treemap({
“野田”：{
id:“根”，“子项”：[
{
id:“纽约”，
大小：[.2]，
颜色：[1]
},
{
id:“不适用”，
大小：[.1]，
颜色：[1]
},
{
id:“SP”，
大小：[.1]，
颜色：[1]
},
{
id:“NQ”，
大小：[.1]，
颜色：[1]
},
{
id:“V”，
大小：[.1]，
颜色：[1]
},
{
id:“R”，
大小：[.1]，
颜色：[1]
},
{
id:“DJ”，
大小：[.1]，
颜色：[1]
},
{
id:“由”，
大小：[.2]，
颜色：[1]
},
]
}
});
});

您是否在使用剑道ui树形图？不，这是一个jQuery树形图插件，您是否共享演示站点url？问题在于您的大小值。大小值之和不应大于1。我添加了解决方案