javascript - D3 : How to draw multiple Convex hulls on Groups of Force layout nodes?

Question

我正在尝试在力布局中的所有组上绘制凸包。但我只画了一半的凸包。当 D3 尝试绘制其余的外壳时，控制台返回错误:尚未创建元素。然而，当我检查控制台中的“组”变量时，所有组数据都在那里，x、y 数据都设置得很好。见下图:

我什至尝试在 tick 函数中延迟绘制船体，但它仍然不起作用，我得到了相同的结果(如下图所示)。

JSFiddle: Only getting half the no. of convex hulls I want

代码如下:

<script>
    var radius = 5.5;
    var color = d3.scaleOrdinal(d3.schemeCategory20b);
    var scale = d3.scaleLinear()
        .domain([0.5, 1])
        .range([1.8, 3.8]);
    var svg2 = d3.select("#svg2");
    var w = +svg2.attr("width"),
        h = +svg2.attr("height");
    var hull = svg2.append("path")
        .attr("class", "hull");
    var groupPath = function(d) { return "M" + d3.polygonHull(d.values.map(function(i) { return [i.x, i.y]; }))
        .join("L") + "Z"; };

    function ticked() {
        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;
            });

        fnode
            .attr("cx", function (d) {
                return d.x = Math.max(radius, Math.min(w - radius, d.x));
            })
            .attr("cy", function (d) {
                return d.y = Math.max(radius, Math.min(h - radius, d.y));
            })
            .attr("r", radius);

        delayHull(6000);

    }

    function delayHull(delay) {
        setTimeout(function() {
            svg2.selectAll("path")
                .data(groups)
                .attr("d", groupPath)
                .enter()
                .append("path")
                .attr("class", "hull")
                .attr("d", groupPath);

        }, delay);
    }

    var simulation, link, fnode, groups;

    var fnodeg = svg2.append("g")
        .attr("class", "fnode");

    var linkg = svg2.append("g")
        .attr("class", "links")
        .attr("id", "linkg");

    d3.json("..//vizData//forceLayout//forceLayout_15000.json", function(error, graph) {
        if (error) throw error;
        simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
                return d.id;
            }).distance(30).strength(1))
            .force("charge", d3.forceManyBody().strength(-2).distanceMin(15).distanceMax(180))
            .force("center", d3.forceCenter(w / 2, h / 2))
            .force("collide", d3.forceCollide().strength(1).iterations(2));

        link = linkg.selectAll("line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke-width", function (d) {
                return scale(d.value);
            });

        fnode = fnodeg.selectAll("circle")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("r", radius)
            .attr("fill", function (d) {
                return color(d.truth);
            });

        simulation
            .nodes(graph.nodes);

        simulation.force("link")
            .links(graph.links);

        groups = d3.nest().key(function(d) { return d.group; }).entries(graph.nodes);

        simulation.on("tick", ticked);

        fnode.append("title")
            .text(function (d) { return d.id; });

        link.append("title")
            .text(function (d) { return d.value; });

    })
</script>

我引用了这个 http://bl.ocks.org/donaldh/2920551凸包示例；他在 tick 函数之外设置了他的“groups”变量，没问题。

我做错了什么？？？

Answer 1

基于 Andrew's answer ，当你的集群只有两个点时，你可以简单地推送另一个内部数组:

if (d.values.length === 2) {
    var arr = d.values.map(function(i) {
        return [i.x, i.y];
    })
    arr.push([arr[0][0], arr[0][1]]);
    return "M" + d3.polygonHull(arr).join("L") + "Z";

这是您的代码，仅进行了更改:

        var radius = 5.5;
        var color = d3.scaleOrdinal(d3.schemeCategory20b);
        var scale = d3.scaleLinear()
          .domain([0.5, 1])
          .range([1.8, 3.8]);
        var svg2 = d3.select("#svg2");
        var w = +svg2.attr("width"),
          h = +svg2.attr("height");
        var hull = svg2.append("path")
          .attr("class", "hull");
        var groupPath = function(d) {
          if (d.values.length === 2) {
            var arr = d.values.map(function(i) {
              return [i.x, i.y];
            })
            arr.push([arr[0][0], arr[0][1]]);
            return "M" + d3.polygonHull(arr).join("L") + "Z";
          } else {
            return "M" + d3.polygonHull(d.values.map(function(i) {
                return [i.x, i.y];
              }))
              .join("L") + "Z";
          }
        };

        function ticked() {
          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;
            });

          fnode
            .attr("cx", function(d) {
              return d.x = Math.max(radius, Math.min(w - radius, d.x));
            })
            .attr("cy", function(d) {
              return d.y = Math.max(radius, Math.min(h - radius, d.y));
            })
            .attr("r", radius);

          delayHull(1000);

        }

        function delayHull(delay) {
          setTimeout(function() {
            svg2.selectAll("path")
              .data(groups)
              .attr("d", groupPath)
              .enter()
              .append("path")
              .attr("class", "hull")
              .attr("d", groupPath);

          }, delay);
        }

        var simulation, link, fnode, groups;

        var fnodeg = svg2.append("g")
          .attr("class", "fnode");

        var linkg = svg2.append("g")
          .attr("class", "links")
          .attr("id", "linkg");

        d3.json('https://api.myjson.com/bins/bkzxh', function(error, graph) {
          if (error) throw error;
          simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function(d) {
              return d.id;
            }).distance(30).strength(1))
            .force("charge", d3.forceManyBody().strength(-2).distanceMin(15).distanceMax(180))
            .force("center", d3.forceCenter(w / 2, h / 2))
            .force("collide", d3.forceCollide().strength(1).iterations(2));

          link = linkg.selectAll("line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke-width", function(d) {
              return scale(d.value);
            });

          fnode = fnodeg.selectAll("circle")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("r", radius)
            .attr("fill", function(d) {
              return color(d.truth);
            });

          simulation
            .nodes(graph.nodes);

          simulation.force("link")
            .links(graph.links);

          groups = d3.nest().key(function(d) {
            return d.group;
          }).entries(graph.nodes);

          simulation.on("tick", ticked);

          fnode.append("title")
            .text(function(d) {
              return d.id;
            });

          link.append("title")
            .text(function(d) {
              return d.value;
            });

        });

.links line {
  stroke: #999;
  stroke-opacity: 0.8;
}

.fnode circle {
  stroke: #fff;
  stroke-width: 1.5px;
  fill-opacity: 1;
}

.hull {
  fill: steelblue;
  stroke: steelblue;
  fill-opacity: 0.3;
  stroke-opacity: 0.3;
  stroke-width: 10px;
  stroke-linejoin: round;
}

<script src="https://d3js.org/d3.v4.js"></script>
<svg id="svg2" width="600" height="600" style="margin-left: -5px"></svg>