Question

这是我的条件 我需要根据用户的输入（圆圈数）绘制圆圈。我将这些圈子放在svg容器中有问题。我的推荐代码是--- http://bl.ocks.org/cjrd/6863459 如果我尝试在svg中放置更多圆圈，则圆圈将转换为节点数组中提供的x和y坐标。如何在不妨碍容器的可用性和ui的情况下，根据需要定位尽可能多的圆圈？

让我们说这是我的节点数组： - ＆gt;

nodes = [{title: "Activity1", id: 0, x: xLoc, y: yLoc},
         {title: "Activity2", id: 1, x: xLoc+200,y: yLoc},
         {title: "Activity3", id: 2, x: xLoc+400,y: yLoc},
         {title: "Activity4", id: 3, x: xLoc+600,y: yLoc},
         ];

这段代码定义了圆圈

thisGraph.circles=
                thisGraph.circles.data(thisGraph.nodes, function(d){ 
    console.log("Id of the circles"+d.id);
    return d.id;});

这段代码说明了svg中圆圈的位置

var newGs= thisGraph.circles.enter()
          .append("g")
           .attr("transform", function(d){return "translate(" + d.x + "," + d.y + ")";});

圆圈转换为d.x，即xLoc和yLoc 我尝试的替代方法是使用：Math.random * svgHeight用于cx属性，Math.random * svg用于cy属性的宽度。但是圈子似乎散落在周围呈现出散乱的图形！任何帮助都将受到高度赞赏@！

使用d3.js在svg中定位圆圈

0 个答案: