Question

我无法使用selectAll：

添加由节点创建的g元素的路径

// define the nodes
var node = svg.selectAll(".node").data(force.nodes()).enter()
        .append("g").attr("id", function(d) {
            return d.id;
        }).attr("class", "node").style("fill", function(d) {
            return color(d.group);
        }).call(force.drag);

// add the nodes
...

// add the links and the arrows
var path = node.selectAll("g").data(force.links(), function(d) {
    return d.id
}).append("path")
//    .attr("class", function(d) { return "link " + d.type; })
.attr("class", "link").attr("marker-end", "url(#end)");

输入数据如下所示：

{
  "nodes": [
    {
      "id": 0,
      "name": "N1",
      "group": 4
    },
    {
      "id": 1,
      "name": "N2",
      "group": 1
    },
    {
      "id": 2,
      "name": "N3",
      "group": 1
    }
  ],
  "links": [
    {
      "id": 0,
      "source": 0,
      "target": 1
    },
    {
      "id": 0,
      "source": 0,
      "target": 2
    }
  ]
}

我试图修改this example

我的目标是节点有鼠标悬停（.node：hover），包括所有外出链接。使用我的简单数据，看起来节点N1将鼠标悬停，包括两个链接。

感谢您的帮助！

以下是所有代码：

<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js"></script>
<style>
.node {
    opacity: 0.8;
    stroke: #fff;
    stroke-width: 1.5px;
}

.node text {
    pointer-events: none;
    font: 10px sans-serif;
    stroke-width: 0px;
}

.node:hover {
    opacity: 1;
}

path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
}
</style>
<body>
    <script>
        // get the data
        d3.json("data2.json", function(error, graph) {

            var color = d3.scale.category20();
            var width = 960, height = 500;

            var force = d3.layout.force().nodes(graph.nodes).links(graph.links)
                    .size([ width, height ]).linkDistance(300).charge(-300).on(
                            "tick", tick).start();

            var svg = d3.select("body").append("svg").attr("width", width)
                    .attr("height", height);

            // build the arrow.
            svg.append("svg:defs").selectAll("marker").data([ "end" ]) // Different link/path types can be defined here
            .enter().append("svg:marker") // This section adds in the arrows
            .attr("id", String).attr("viewBox", "0 -5 10 10").attr("refX", 15)
                    .attr("refY", -1.5).attr("markerWidth", 6).attr(
                            "markerHeight", 6).attr("orient", "auto").append(
                            "svg:path").attr("d", "M0,-5L10,0L0,5");

            // define the nodes
            var node = svg.selectAll(".node").data(force.nodes()).enter()
                    .append("g").attr("id", function(d) {
                        return d.id;
                    }).attr("class", "node").style("fill", function(d) {
                        return color(d.group);
                    }).call(force.drag);

            // add the nodes
            node.append("circle").attr("r", function(d) {
                return 3 * d.group
            });

            // add the text 
            node.append("text").attr("x", 12).attr("dy", ".35em").style(
                    "color", "black").text(function(d) {
                return d.name;
            });

            // add the links and the arrows
            var path = node.selectAll("g").data(force.links(), function(d) {
                return d.id
            }).append("path")
            //    .attr("class", function(d) { return "link " + d.type; })
            .attr("class", "link").attr("marker-end", "url(#end)");

            // add the curvy lines
            function tick() {
                path.attr("d", function(d) {
                    var dx = d.target.x - d.source.x, dy = d.target.y
                            - d.source.y, dr = Math.sqrt(dx * dx + dy * dy);
                    return "M" + d.source.x + "," + d.source.y + "A" + dr + ","
                            + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
                });

                node.attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")";
                });
            }

        });
    </script>
</body>
</html>

Answer 1

我用mouseover和mouseout解决了我的问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta name="author" content="myborobudur">
      <meta name="date" content="2014-09-02T00:00:00+01:00">
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title>Job Recommender: d3js Graph Study</title>
      <script src="http://d3js.org/d3.v3.js"></script>
      <style>
         .node {
         opacity: 0.8;
         stroke: #fff;
         stroke-width: 1.5px;
         }
         .text {
         pointer-events: none;
         font: 12px sans-serif;
         stroke-width: 0px;
         color: #000;
         }
         .node:hover {
         opacity: 1;
         }
         path.link {
         fill: none;
         stroke: #666;
         stroke-width: 1.5px;
         }
      </style>
   </head>
   <body>
      <h2>Job Recommender: d3js Graph Study</h2>
      <script>
         function selectLinks(thisObject) {
            changeLinkStyle(thisObject, function(node, link) {
                link.style("stroke", node.attr("fillColor"));
                link.style("stroke-width", "10px");
                link.style("opacity", "0.5");
                link.attr("marker-end", "");
            });
         }

         function deSelectLinks(thisObject) {
            changeLinkStyle(thisObject, function(node, link) {
                link.style("stroke", "#666");
                link.style("stroke-width", "1.5px");
                link.style("opacity", "1");
                link.attr("marker-end", "url(#end)");
            });
         }

         function changeLinkStyle(thisObject, changeStyle) {
            var source = d3.select(thisObject);
            var sourceId = d3.select(thisObject).attr('id');
            d3.selectAll('.link').each(function(d, i) {
                var link = d3.select(this);
                var linkSourceId = link.attr('source');
                if (linkSourceId === sourceId) {
                    changeStyle.call(undefined, source, link);
                }
            });
         }

         // get the data
         d3.json("data.json", function(error, graph) {

            var color = d3.scale.category20();
            var width = 1200, height = 800;

            var force = d3.layout.force().nodes(graph.nodes).links(graph.links)
                            .size([ width, height ])
                            .linkDistance(300)
                            .charge(-300)
                            .on("tick", tick)
                            .start();

            var svg = d3.select("body").append("svg")
                            .attr("width", width)
                            .attr("height", height);

            // build the arrow.
            svg.append("svg:defs").selectAll("marker")
                            .data([ "end" ]) // Different link/path types can be defined here
                            .enter().append("svg:marker") // This section adds in the arrows
                            .attr("id", String)
                            .attr("viewBox", "0 -5 10 10")
                            .attr("refX", 15)
                            .attr("refY", -1.5)
                            .attr("markerWidth", 6)
                            .attr("markerHeight", 6)
                            .attr("orient", "auto")
                            .append("svg:path")
                            .attr("d", "M0,-5L10,0L0,5");

            // add the links and the arrows
            var path = svg.append("svg:g").selectAll("path")
                            .data(force.links())
                            .enter().append("svg:path")                 
                            .attr("class", "link")
                            .attr("source", function(d) { return d.source.id })
                            .attr("marker-end", "url(#end)");

            // define the nodes
            var node = svg.selectAll(".node").data(force.nodes())
                            .enter().append("g").call(force.drag);

            // add the nodes
            node.append("circle").attr("id", function(d) { return d.id })
                            .attr("fillColor", function(d) { return color(d.group); })
                            .attr("onmouseover", "selectLinks(this)")
                            .attr("onmouseout", "deSelectLinks(this)")
                            .attr("class", "node")
                            .attr("r", function(d) { return 3 * d.group })
                            .style("fill", function(d) { return color(d.group); });

            // add the text 
            node.append("text").attr("x", 12)
                            .attr("dy", ".35em")
                            .attr("class", "text")
                            .text(function(d) { return d.name; });

            // add the curvy lines
            function tick() {
                path.attr("d", function(d) {
                    var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy);
                    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
                });

                node.attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")";
                });
            }

         });
      </script>
   </body>
</html>

将数据添加到选择中

1 个答案: