1

首先，我是 d3.js 的新手，我对这一点以及它所能做的事情感到惊讶。这么说，对不起我的“noobish”。

我正在努力使用 d3 Collapsible Force Layout 方案来做一些不同的事情。这是原始的： http: //mbostock.github.com/d3/talk/20111116/force-collapsible.html：

在此处输入图像描述

  1. 在折叠元素之前，根据其子节点获取元素的大小。所以想法是根据其子节点的大小增加元素的大小。在原始示例中，大小直接基于每个子节点内的字段。
  2. 固定布局，因为它处于其翻译模式的最终状态（直到变为静态时才显示模糊动作）。
  3. 仅显示在子节点字段中具有某些"alert":1（如{"name": "AgglomerativeCluster", "size": 3938, "alert":1}）信息的节点。就像整个图表在重新加载信息后变得未折叠一样，并且只有当某些子节点alert="1"添加了信息时，才会显示其从根到叶的路径，并且所有其他的都关闭，从而也可以单击并打开其他叶。

----已解决 4. 在固定区域（如架构的右上角）打开一个窗口，单击它们后，显示每个节点字段内可用的附加信息。 - - -解决了

这是到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="d3/d3.js"></script>
    <script type="text/javascript" src="d3/d3.geom.js"></script>
    <script type="text/javascript" src="d3/d3.layout.js"></script>
    <style type="text/css">

        circle.node {
            cursor: pointer;
            stroke: #000;
            stroke-width: .5px;

        }
        .node text {
            font: 12px sans-serif;
            pointer-events: none;
            font-weight: bold;
        }
        line.link {
            fill: none;
            stroke: #9ecae1;
            stroke-width: 1.5px;
        }

    </style>
</head>
<body>



<script type="text/javascript">

    var w = 1280,
        h = 800,
        root;

    var force = d3.layout.force()
            .linkDistance(80)
            .charge(-270)
            .gravity(.01)
            .size([w, h]);

    var vis = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .attr("pointer-events", "all")
            .append('svg:g')
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append('svg:g');

    vis.append('svg:rect')
            .attr('width', w)
            .attr('height', h)
            .attr('fill', 'rgba(255,255,255,255)')




    //setInterval(function(){
    d3.json("mbostock.github.io/d3/talk/20111116/flare.json", function(json) {
        root = json;
        root.fixed=true;
        root.x = w / 2;
        root.y = h / 2 - 50;
        update();
    });
  //  },10000);
    function redraw() {
        console.log("here", d3.event.translate, d3.event.scale);
        vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");

    }
    function update() {
        var nodes = flatten(root),
                links = d3.layout.tree().links(nodes);


        // Restart the force layout.
        force
                .nodes(nodes)
                .links(links)
                .start();


        // Update the links…
        var link = vis.selectAll("line.link")
                .data(links, function(d) { return d.target.id; });

        // Enter any new links.
        link.enter().insert("svg:line", ".node")
                .attr("class", "link")
                .attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

        // Exit any old links.
        link.exit().remove();

        // Update the nodes…
        var node = vis.selectAll("g.node")
                .data(nodes, function(d) { return d.id; })


        node.select("circle")
                .style("fill", color);




        // Enter any new nodes.
        var nodeEnter = node.enter().append("svg:g")
                .attr("class", "node")
                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
                .on("click", click)
                .call(force.drag);

        nodeEnter.append("svg:circle")
             //   .attr("r", function(d) {if(d.weight <3){return 20}else{return d.children .weight*1.5 || 20; }})
               // .attr("r", function(d) { return  d.weight>1 ? d.weight :  d.weight; })
                .attr("r", function(d) { return 20|| 20; })

        //.attr("r", function(d) { return  d.name.length || 20; })
                //.attr("r", function(d) { return  node.selectAll(this.children).length; })
                //.attr("r", function(d) { return  node.index*10; })

                .style("stroke","#c0c0c0")
                .style("fill", color);

        nodeEnter.append("svg:text")
                .attr("text-anchor", "middle")
                .attr("dy", ".35em")
                .text(function(d) { return d.name; });
                //.text(function(d) { return d.distance(); });

        // Exit any old nodes.
        node.exit().remove();


        // Re-select for update.
        link = vis.selectAll("line.link");
        node = vis.selectAll("g.node");

        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });
            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        });
        //force.stop();

    }

    // Color leaf nodes orange, and packages white or blue.
    function color(d) {
        if(d.alert==1){
            return "red";
        }
        return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
    }

    // Toggle children on click.
    function click(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update();
    }

    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            if (node.children) node.children.forEach(recurse);
            if (!node.id) node.id = ++i;
            nodes.push(node);
        }

        recurse(root);
        return nodes;

    }

</script>
</body>
</html>

谁能帮帮我吗？

4

0 回答 0