Question

我试图将圆圈附加到线的两边/两端。我不确定这是否是正确的做法

   var lineData = [{"x": 0, "y": 0}, {"x": 50, "y": 0}];
   svg.append("svg:defs").selectAll("marker")
  .data(["arrow"])
  .enter().append("svg:marker")
  .attr("id", String)
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 10)
  .attr("refY", 0)
  .attr("markerWidth", 10)
  .attr("markerHeight", 10)
  .attr("orient", "auto")
  .append("svg:path")
  .attr("d", "M3,-4 L10,0 L3,4");
   var lineFunction = d3.svg.line()
   .x(function (d) {
  return d.x;
  })
  .y(function (d) {
  return d.y;
  })
  .interpolate("linear");

     var line = svg.append("path")
    .attr("d", lineFunction(lineData))
    .attr("id", "myPath")
    .attr("class", "link_arrow")
    .attr("marker-end", "url(#arrow)")
    .attr("transform", "translate(" + x + "," + y + ")")
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("fill", "none")
    .style('cursor', 'move')
    .call(drag);

    var randomI = Math.round(Math.random() * myPath.getTotalLength());
    var myPoint = myPath.getPointAtLength(randomI);
    console.log("x=" + myPoint.x + "  y=" + myPoint.y);
    d3.select("line").append("svg:circle")
    .attr("cx", myPoint.x)
    .attr("cy", myPoint.y)
    .attr("r", 4.5);
    d3.select("line").append("svg:circle")
    .attr("cx", myPoint.x + randomI)
    .attr("cy", myPoint.y)
    .attr("r", 4.5);

在将线圈添加到线后，我想拖动并拉伸包含圆圈的线，如下例所示：http://rigrr.rapilabs.com/。任何方式这都是一个不同的问题，但我在这里写，因为我希望附加圆圈保持这个功能。

将圆圈添加到一行

0 个答案: