Question

我试图通过在源圆和目标矩形之间绘制线来连接SVG圆和矩形。这是我的json文件的格式：

    [{"sourceNode":"1","type":"sourceNode"},
     {"sourceNode":"3","type":"sourceNode"},
     {"sourceNode":"8","type":"sourceNode"},
     .....
     {"targetNode":"1","type":"targetNode"},
     {"targetNode":"7","type":"targetNode"},
     {"targetNode":"1","type":"targetNode"},
     .....
     {"type":"link","source":"1","target":"2"},
     {"type":"link","source":"3","target":"4"},
     {"type":"link","source":"3","target":"5"}]

我正在使用勾选功能为圆圈和线条赋予属性。圆圈工作正常，但是当我在html中检查我的SVG时，我没有得到没有属性的行。

以下是代码：

var nodeSource = g.selectAll("circle")
    .data(data.filter(function (d){ return d.type == "sourceNode"; }))
    .enter().append("circle")
    .attr("r", 5)
    .style("fill", "blue")
        .call(force.drag);

 var nodeTarget = g.selectAll("rect")
    .data(data.filter(function (d){ return d.type == "targetNode"; }))
    .enter().append("rect")
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", "green")
        .call(force.drag);

    var link = g.selectAll("line")
    .data(data.filter(function (d){ return d.type == "link"; }))
    .enter().append("line")
        .style("stroke-width", "2")
        .style("stroke", "grey")
        .call(force.drag);

function tick(e) {
    nodeSource
      .attr("cx", function(d) { return d.x = Math.max(radius(), Math.min(width() - radius(), d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(radius(), Math.min(height() - radius(), d.y)); });

    nodeTarget
      .attr("x", function(d) { return d.x = Math.max(radius(), Math.min(width() - radius(), d.x)); })
      .attr("y", function(d) { return d.y = Math.max(radius(), Math.min(height() - radius(), d.y)); });

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

         chart.draw()

}

Answer 1

当您为自己的行分配x1，x2等坐标时，您实际上并没有给他们一个值。在您的json文件中，链接的数据包含：

"source": "1"

例如，

。使用d.source.anything不会返回值，因为"1"没有附加任何属性。如果您想获得具有此编号的节点的引用，则必须使用d3来查找它：

line.attr('x1', function (d) {
        return d3.selectAll('circle').filter(function (k) {
            return d.source === k.sourceNode;
        }).attr('cx');
    })

然后，当你想要做目标节点时：

line.attr('x2', function(d) {
        return d3.selectAll('rect').filter(function (k) {
            return d.target === k.targetNode;
        }).attr('x');
    })

使用Javascript

1 个答案: