Question

首先，我是d3.js的新手，我对此感到惊讶，并且我们可以做些什么。这样说，对不起我的“noobish”。

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

enter image description here

在折叠元素之前，根据其子节点获取元素的大小。因此，我们的想法是根据子节点的大小增加元素的大小。在原始示例中，大小直接基于每个子节点内的字段。
修复布局，因为它处于翻译模式的最后位置（在显示为静态之前不显示模糊操作）。
仅显示在childnode字段中包含"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>

有人可以帮助我吗？

D3 - 可折叠力布局修改

0 个答案: