Question

我是d3 JS的初学者。我已经创建了一个d3层次化边缘捆绑可视化。现在我正在尝试这样做：每当我将鼠标移动到任何节点（鼠标悬停事件）时，必须突出显示其所有目标节点和相应的链接。如何做到这一点？我目前的代码是：

<html>
    <head>

        <style>
            .node {
              font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            .link {
              stroke: steelblue;
              stroke-opacity: .4;
              fill: none;
            }
        </style>

    </head>
    <body>
            <script src="http://d3js.org/d3.v3.min.js"></script>
            <script>
            var classes=[
{"name":"a","size":3938,"imports":["b","f"]},
{"name":"b","size":3938,"imports":[]},
{"name":"c","size":3938,"imports":["a"]},
{"name":"d","size":3938,"imports":[]},
{"name":"e","size":3938,"imports":[]},
{"name":"f","size":3938,"imports":[]}


];
                    var diameter = 960,
                        radius = diameter / 2,
                        innerRadius = radius - 120;
                    var cluster = d3.layout.cluster()
                        .size([360, innerRadius]);

                    var bundle = d3.layout.bundle();

                    var line = d3.svg.line.radial()
                        .interpolate("bundle")
                        .tension(.85)
                        .radius(function(d) { return d.y; })
                        .angle(function(d) { return d.x / 180 * Math.PI; });

                    var svg = d3.select("body").append("svg")
                        .attr("width", diameter)
                        .attr("height", diameter)
                      .append("g")
                        .attr("transform", "translate(" + radius + "," + radius + ")");



                      var nodes = cluster.nodes(packageHierarchy(classes)),
                          links = packageImports(nodes);

                      svg.selectAll(".link")
                          .data(bundle(links))
                        .enter().append("path")
                          .attr("class", "link")
                          .attr("d", line);

                      svg.selectAll(".node")
                          .data(nodes.filter(function(n) { return !n.children; }))
                        .enter().append("g")
                          .attr("class", "node")
                          .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
                        .append("text")
                          .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
                          .attr("dy", ".31em")
                          .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                          .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
                          .text(function(d) { return d.key; });


                    // Lazily construct the package hierarchy from class names.

                    function packageHierarchy(classes) {
                      var map = {};
                      function find(name, data) {
                        var node = map[name], i;
                        if (!node) {
                          node = map[name] = data || {name: name, children: []};
                          if (name.length) {
                            node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
                            node.parent.children.push(node);
                            node.key = name.substring(i + 1);
                          }
                        }
                        return node;
                      }
                      classes.forEach(function(d) {
                        find(d.name, d);
                      });
                      return map[""];
                    }


                    // Return a list of imports for the given array of nodes.
                    function packageImports(nodes) {
                      var map = {},
                          imports = [];
                      // Compute a map from name to node.
                      nodes.forEach(function(d) {
                        map[d.name] = d;
                      });
                      // For each import, construct a link from the source to target node.
                      nodes.forEach(function(d) {
                        if (d.imports) d.imports.forEach(function(i) {
                          imports.push({source: map[d.name], target: map[i]});
                        });
                      });
                      return imports;
                    }
                    </script>



    </body>
</html>

Answer 1

首先你创建一个函数colorNode。

该函数的目标是遍历所有DOM并使用过滤器检查数据名称是否相同。对于那些已过滤的节点，使其样式填充为红色。

            function colorNode(name){
              //iterate through all the dom and get the DOM which has the data
              var node = d3.selectAll(".node")[0].filter(function(d){
                return d3.select(d).data()[0].name == name;
              });
              //for the matching node DOM set the fill to be red
              d3.selectAll(node).style("fill", "red");
            }

显示链接相同：

            function colorLink(src,tgt){
              //iterate through all the links for src and target.
              var link = d3.selectAll(".link")[0].filter(function(d){
                return (d3.select(d).data()[0][0].name == src && d3.select(d).data()[0][2].name == tgt);
              });
              //for the filtered link make the stroke red.
              d3.selectAll(link).style("stroke", "red");
            }

接下来在节点上配置鼠标悬停事件。

.on("mouseover", function(d){
                          //first make all the nodes/links black(reset).
                          d3.selectAll(".node").style("fill", "black");
                          d3.selectAll(".link").style("stroke", "steelblue");
                          //color the node which is hovered.
                          colorNode(d.name);
                          //iterate over the imports which is the targets of the node(on which it is hovered) and color them.
                          d.imports.forEach(function(name){
                            colorNode(name);
                            //color the link for a given source and target name.
                            colorLink(d.name, name);
                          });
                        })

工作代码here。

如何在d3层次边缘捆绑中突出显示源节点及其所有目标节点和相应链接

1 个答案: