Question

我正在研究d3.js的力布局，

我已经定义了节点和链接。但节点的参数属于形状类型rect和circle。所以我想读取节点数据并相应地绘制它们。当我检查DOM时，我可以看到圆形和矩形元素，但它们没有显示在屏幕上。显示节点的链接。

我在Windows 10计算机上使用Chrome。

提供jsbin链接以供参考。 Dynamically creating nodes shape type based on data

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style>

  .node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
  }

  .link {
    stroke: #777;
    stroke-width: 2px;
  }

</style>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
</script>
</head>
<body>

<script type="text/javascript">

    var width = 600,
      height = 500;

  var graph = {
"nodes": [  { "x": 80, "y": 20, "height": 30, "width": 30, "color" : "blue" },
            { "x": 595.98896,  "y":  56.377057 },
            { "x": 319.568434, "y": 278.523637 },
            { "x": 214.494264, "y": 214.893585 },
            { "x": 130, "y": 20, "height": 30, "width": 30, "color" : "red" },
            { "x":  84.078465, "y": 192.021902 },
            { "x": 196.952261, "y": 370.798667 },
            { "x": 107.358165, "y": 435.15643  }

        ],
"links": [  { "target": 0, "source":  1 },
            { "target":  0, "source":  2 },
            { "target": 0, "source":  3 },
            { "target":  4, "source":  0},
            { "target": 6, "source":  4 },
            { "target": 7, "source":  4 },
            { "target": 5, "source":  4 }
        ]
};

  var nodes = graph.nodes,
   links = graph.links;

  var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

  var force = d3.layout.force()
  .size([width, height])
  .nodes(nodes)
  .links(links);

  force.linkDistance(width/2);

  var link = svg.selectAll('.link')
  .data(links)
  .enter().append('line')
  .attr('class', 'link');

  // Each node is drawn as a circle or rect based on the data.

  var node = svg.selectAll('.node')
  .data(nodes)
  .enter()
  .append(function(d,i){
    if(d.height){
      //debugger;
      return document.createElement("rect");
    }
    else
      return document.createElement("circle");
   })
  .attr('class', 'node');


  force.on('end', function() { 

     var circles = svg.selectAll('circle');
    //console.log(circles);
    var circleAttributes = circles
    .attr("cx", function (d) { return d.x; })
    .attr("cy", function (d) { return d.y; })
    .attr("r", function (d) { return 12; });

    var rectangles = svg.selectAll('rect');
    //console.log(rectangles);
    var rectangleAttributes = rectangles
    .attr("x", function (d) { return d.x; })
    .attr("y", function (d) { return d.y; })
    .attr("height", function (d) { return d.height; })
    .attr("width", function (d) { return d.width; })
    .style("fill", function(d) { return d.color; });

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

  });
  force.start();

</script>

Answer 1

我相信你不能append通过创建元素来有条件地在你的例子中。（或者至少我没有找到这样的例子）

一个简单但可能不是优雅的解决方案就是这样（jsbin）：

// create a group element to hold the data
var node = svg.append('g')
               .selectAll('.node')
               .data(nodes)
               .enter()
               .append('g')

// filter the rectangles and the circles
var rects = node.filter(function(d){ return d.height!=undefined;}) // or simply return d.height 
var circles = node.filter(function(d){ return d.height==undefined;}) // and return !d.height

// append circle or rect on the filtered values and go on from that
circles.append('circle')
       .attr('class', 'node');

rects.append('rect')
     .attr('class', 'node');

希望这有帮助！祝你好运！

D3节点未显示形状类型

1 个答案: