Question

我最近一直在研究如何使用D3将一条线分成多条线。这将是当用户单击单行时，然后在单击时拆分。我在网上找不到任何关于如何做到这一点的例子。有人可以告诉我这是否可能？提前谢谢！

D3：

var link = svg.selectAll(".link")
      .data(force.links())
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) {
        if(d.value < 76742302){
          return 1;
        }else if(d.value < 159879796){
          return 2;
        }else if (d.value < 354232554) {
          return 3;
        }else if (d.value < 695427312) {
          return 4;
        }else{
          return 5;
        }
      });

Answer 1

'svg：line'通常有x1，y1，x2，y2值。

您可以使用一些基本代数来计算线方程（http://www.coolmath.com/algebra/08-lines/12-finding-equation-two-points-01）

找到要分割线条的点并创建两个新的线条元素。

如果你想将它分成一半，只需找到中间点x1 + x2 / 2和y1 + y2 / 2并创建两条新线并将它们附加到父线并删除当前线。

on click
add new line from start to mid
add new line from mid to end
remove self

如何将单行拆分为多行？

1 个答案: