Question

下面是我的d3.js图表，它使用节点和链接呈现图表。其中一个要求是添加值编号作为节点名称的一部分。所以当前节点名称显示为“用户登录”我希望它是“用户登录（5）”

这段代码是

node.append("text").text(function (d) {
                                      return d.name;
                                  }).style("font-size", "12px").attr("dy", "1em");

但此处无法访问链接值。那怎么办呢？

这是完整的代码

       <html>
       <head>
           <script src="//d3js.org/d3.v3.min.js"></script>
        <style>
            .node {
                stroke: #fff;
                stroke-width: 1.5px;
            }

            .link {
                stroke: #999;
                stroke-opacity: .6;
            }
        </style>
 </head>
 <body>
              <script>
                                  var graph = {
                                      "nodes" : [{"name" : "User Login"},{"name" : "Appointments"},{"name" : "Store Visit"},{"name" : "Visit History"},{"name" : "Resume Store Visit"}], 
                                      "links" : [{
                                                    "source": "Appointments",
                                                    "target": "User Login",
                                                    "value": 1
                                                  }, {
                                                    "source": "Store Visit",
                                                    "target": "User Login",
                                                    "value": 8
                                                  }, {
                                                    "source": "Visit History",
                                                    "target": "User Login",
                                                    "value": 10
                                                  }, {
                                                    "source": "Visit History",
                                                    "target": "Store Visit",
                                                    "value": 6
                                                  }, {
                                                    "source": "Resume Store Visit",
                                                    "target": "User Login",
                                                    "value": 1
                                                  }]
                                                };

                                  var data;// a global
                                  d3.json("http://127.0.0.1:7101/MUDRESTService/rest/v1/mudstats?onlyData=true", function (error, json) {
                                      data = json;

                                  });

                                  var width = 960, height = 500;

                                  var color = d3.scale.category20();

                                  var force = d3.layout.force().charge( - 120).linkDistance(300).size([width, height]);

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

                                  graph.links = graph.links.map(function(l) {
                                      var sourceNode = graph.nodes.filter(function(n) {
                                          return n.name === l.source;
                                        })[0],
                                        targetNode = graph.nodes.filter(function(n) {
                                          return n.name === l.target;
                                        })[0];

                                      return {
                                        source: sourceNode,
                                        target: targetNode,
                                        value: l.value
                                      };
                                    });



                                  force.nodes(graph.nodes).links(graph.links).start();

                                  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");

                                  var link = svg.selectAll(".link").data(graph.links).enter().append("line")
                                                .attr("class", "link").attr("marker-end", "url(#end)")
                                                .style("stroke-width", function (d) {
                                                        return Math.sqrt(d.value);
                                                  });

                                  var node = svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("transform", function (d) {
                                      return "translate(" + d.x + "," + d.y + ")";
                                  }).call(force.drag);

                                  node.append("rect").attr("class", "node").attr("width", 100).attr("height", 35).style("fill", function (d) {
                                      return color(d.group);
                                  }).style("stroke", "black").style("stroke-width", "1px");

                                  node.append("text").text(function (d) {
                                      return d.name;
                                  }).style("font-size", "12px").attr("dy", "1em");

                                  node.append("title").text(function (d) {
                                      return d.name;
                                  });

                                  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 + ")";
                                      });
                                  });
                                </script>
                                </body></html>

Answer 1

您可以像这样过滤出文字渲染中的链接，并从中提取您想要的信息：

node.append("text").text(function(d) {
  //filter out all the links which has this node as source or target
  var flinks = graph.links.filter(function(link){
    return (link.source.name == d.name || link.target.name == d.name);
  });
  //all links which has the nodes in source or target
  return d.name + " (" + flinks.length+")";
}).style("font-size", "12px").attr("dy", "1em");

工作代码here

希望这有帮助！

d3.js使用值作为节点标签的一部分的图形

1 个答案: