D3節點沒有顯示出來形狀類型

我已經定義的節點和鏈接。但節點具有屬於形狀類型矩形和圓形的參數。所以我想讀取節點數據並相應地繪製它們。當我檢查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>

來源

2017-03-10 nilesh

我相信你不能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');

希望這有助於！祝你好運！

來源

2017-03-10 15:41:03 mkaran

感謝mkaran，你的方法奏效，但我們可以有條件地創建元素，僅供參考，請檢查jsbin鏈接[根據數據動態創建節點形狀類型]（http://jsbin.com/nevitoz/1/edit？ HTML，輸出） – nilesh

@nilesh很好，我還沒有偶然發現這樣一種方法，很高興知道！ – mkaran

D3節點沒有顯示出來形狀類型

回答

相關問題