Question

所以，这是树形图的模型。点击jsfiddel上的运行来查看它（没有超过2个链接的权利）

它是完美的，但我的真实图表会更大，所以我写了一个函数，在点击时切换标题和描述，所以只有在我感兴趣的情况下我才能得到关于某事的信息。我的问题是链接也不会更新。

我的代码看起来像 Jsfiddle link

HTML

 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equi="X-UA-Compatible" content="IE=edge, chrome=1">
            <meta name="viewport" content="width=device-width">

        <title>My Try</title>

        <link rel="stylesheet" href="../treant-js-master/Treant.css">
        <link rel="stylesheet" href="myTry.css">
    </head>
    <body>
        <div class="chart Treant loaded" id="myTry"></div>

        <script src="../treant-js-master/vendor/raphael.js"></script>
        <script src="../treant-js-master/Treant.js"></script>
        <script src="../treant-js-master/vendor/jquery.min.js"></script>

        <script src="myTry.js"></script>
        <script>
            new Treant( chart_config );
        </script>
        <script>
            $(".node1").click(function(e){
                if (e.target.classList.value !== "collapse-switch"){                                             
                    $(this).children(".node-title").toggle();
                    $(this).children(".node-desc").toggle();
                }
            })
        </script>
    </body>
</html>

的Javascript

 var config = {
            container: "#myTry",
            levelSeparation: 45,
            rootOrientation: "WEST",
            siblingSeparation: 10,
            connectors: {
                type: "curve",
                style: {
                    fill: "#e6b8ff"
                }
            },
            node: {
                HTMLclass: 'node1',
                collapsable: true,
                collapsed: true
            }
        },
        group = {
            text: {
                name: "Group",
                title: "Group",
                desc: "complicated group"
            }
        },
        group1 = {
            parent: group,
            text: {
                name: "Grou",
                title: "Grou",
                desc: "complicated grou"
            }
        },
        group2 = {
            parent: group,
            text: {
                name: "Gro",
                title: "Gro",
                desc: "complicated gro"
            }
        },
        group11 = {


  parent: group1,
        text: {
            name: "Gr",
            title: "Gr",
            desc: "complicated gr"
        }
    },
    group12 = {
        parent: group1,
        text: {
            name: "G",
            title: "G",
            desc: "complicated g"
        }
    },
    chart_config = [
        config,
        group,
        group1,
        group2,
        group11,
        group12
    ];

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td 
{ margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node {  }
.Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
.node-name { font-weight: bold;}

.node1 {
    padding: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #ffe4e1;
    border: 3px solid #ffc0cb;
    width: 200px;
    font-family: Arial;
    font-size: 14px;
}

.collapse-switch {
    width: 16px !important;
    height: 16px !important;
}

treant js链接未调整到节点尺寸变化

0 个答案: