Fatal编程技术网
  • javascript/
  • Javascript 如何在圆之间画线？

Javascript 如何在圆之间画线？

javascript d3.js

Javascript 如何在圆之间画线？,javascript,d3.js,Javascript,D3.js,我试图画三个圆，并在每个圆之间画连接线 最终目标是使用json配置配置连接哪些圆，但在此之前，我只是尝试使用回调和硬代码值连接这些圆 以下是我到目前为止的情况： <!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body style=

我试图画三个圆，并在每个圆之间画连接线

最终目标是使用json配置配置连接哪些圆，但在此之前，我只是尝试使用回调和硬代码值连接这些圆

以下是我到目前为止的情况：

<!DOCTYPE html>
<html>
  <head>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<body style="overflow: hidden;">
<div id="canvas"  style="overflow: hidden;"></div>

<script type="text/javascript">
    var graph = {
        "nodes":[
            {"name":"1","group":1, "x" : 100, "y" : 100 , r : 20},
            {"name":"2","group":1, "x" : 200, "y" : 150 ,r : 30},
            {"name":"3","group":2 , "x" : 300, "y" : 250 , r : 50}
        ],
        "links":[
            {"source":1,"target":0,"value":1}
        ]
    }

    var width = 2000;
    var height = 500;

    var svg = d3.select("#canvas").append("svg")
            .attr("width", width)
            .attr("height", height)
        .append("g");

    var lines = svg.attr("class", "line")
            .selectAll("line").data(graph.links)
            .enter().append("line")
            .attr("x1", function(d) { return 50 })
            .attr("y1", function(d) { return 50 })
            .attr("x2", function(d) { return 100 })
            .attr("y2", function(d) {  return 100 })

    var circles = svg.selectAll("circle")
            .data(graph.nodes)
            .enter().append("circle")
            .style("stroke", "gray")
            .style("fill", "white")
            .attr("r", function(d, i){ return d.r })
            .attr("cx", function(d, i){ return d.x })
            .attr("cy", function(d, i){ return d.y })

</script>
</body>
</html>


变量图={
“节点”：[
{“名称”：“1”，“组”：1，“x”：100，“y”：100，r:20}，
{“名称”：“2”，“组”：1，“x”：200，“y”：150，r:30}，
{“名称”：“3”，“组”：2，“x”：300，“y”：250，r:50}
],
“链接”：[
{“源”：1，“目标”：0，“值”：1}
]
}
var宽度=2000；
var高度=500；
var svg=d3.选择（“画布”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
var lines=svg.attr（“类”、“行”）
.选择所有（“线”）.数据（图形链接）
.enter（）.append（“行”）
.attr（“x1”，函数（d）{return 50}）
.attr（“y1”，函数（d）{return 50}）
.attr（“x2”，函数（d）{return 100}）
.attr（“y2”，函数（d）{return 100}）
var circles=svg.selectAll（“圆”）
.数据（图.节点）
.enter（）.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“r”，函数（d，i）{返回d.r}）
.attr（“cx”，函数（d，i）{返回d.x}）
.attr（“cy”，函数（d，i）{返回d.y}）
但没有划清界线。每个圆应包含一条连接到另一个圆的直线。 我只是硬编码x1，y1，x2，y2坐标，但我将使用 其他圆的坐标，以确定直线的位置。为什么没有划清界线？为了连接这些圆圈，我是否应该使用标准d3方法

小提琴：

更新：

以下是更新的代码，该代码按照dataset graph.nodes中的配置在圆之间绘制连接线：

<!DOCTYPE html>
<html>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<body style="overflow: hidden;">
<div id="canvas"  style="overflow: hidden;"></div>

<script type="text/javascript">

    var graph = {
        "nodes": [
            {name: "1", "group": 1, x: 100, y: 50, r: 10 , connected : "2"},
            {name: "2", "group": 1, x: 200, y: 90, r: 15, connected : "1"},
            {name: "3", "group": 2, x: 300, y: 230, r: 25, connected : "1"}
        ] 
    }


    $( document ).ready(function() {

        var width = 2000;
        var height = 500;

        var svg = d3.select("#canvas").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g");

        var lines = svg.attr("class", "line")
                .selectAll("line").data(graph.nodes)
                .enter().append("line")
                .style("stroke", "gray") // <<<<< Add a color
                .attr("x1", function (d, i) {
                    return d.x
                })
                .attr("y1", function (d) {
                    return d.y
                })
                .attr("x2", function (d) {
                    return findAttribute(d.connected).x
                })
                .attr("y2", function (d) {
                    return findAttribute(d.connected).y
                })

        var circles = svg.selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .style("stroke", "gray")
                .style("fill", "white")
                .attr("r", function (d, i) {
                    return d.r
                })
                .attr("cx", function (d, i) {
                    return d.x
                })
                .attr("cy", function (d, i) {
                    return d.y
                });

    });

    function findAttribute(name) {
        for (var i = 0, len = graph.nodes.length; i < len; i++) {
            if (graph.nodes[i].name === name)
                return graph.nodes[i]; // Return as soon as the object is found
        }
        return null; // The object was not found
    }


</script>
</body>
</html>


变量图={
“节点”：[
{名称：“1”，“组”：1，x:100，y:50，r:10，连接：“2”}，
{名称：“2”，“组”：1，x:200，y:90，r:15，连接：“1”}，
{名称：“3”，“组”：2，x:300，y:230，r:25，连接：“1”}
] 
}
$（文档）.ready（函数（）{
var宽度=2000；
var高度=500；
var svg=d3.选择（“画布”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）；
var lines=svg.attr（“类”、“行”）
.选择所有（“线”）.数据（图形节点）
.enter（）.append（“行”）

.style（“笔划”、“灰色”）/您需要确保线条具有笔划颜色，否则它们将被绘制为白色，您将无法看到它们


 var lines = svg.attr("class", "line")
            .selectAll("line").data(graph.links)
            .enter().append("line")
            .style("stroke", "gray") // <<<<< Add a color
            .attr("x1", function(d) { return 50 })
            .attr("y1", function(d) { return 50 })
            .attr("x2", function(d) { return 100 })
            .attr("y2", function(d) {  return 100 })



var lines=svg.attr（“类”、“行”）
.选择所有（“线”）.数据（图形链接）
.enter（）.append（“行”）

.style（“stroke”、“gray”）//这是一个常见的疏忽-它仍然让我感到惊讶！SVG对象默认为黑色填充，但没有笔划。如果屏幕上没有显示某些内容，请检查元素是否存在但没有显示。