追加不同的形狀

我想用兩種形狀的節點作爲力圖：rect和circle，形狀信息在d.shape。這裏有幾條線索，但解決方案對我來說不是很清楚。追加不同的形狀

我第一次嘗試使用merge方法，它不起作用：在此jsbin，var circlesANDrects = rects顯示矩形和var circlesANDrects = circles顯示圈，而var circlesANDrects = circles.merge(rects)不顯示兩者。

有誰知道如何解決這個問題？

否則，我認爲這個想法的解決辦法是使用一個街區，append不同的形狀根據形狀信息：

var circlesANDrects = svg.append("g").selectAll("rect circle") 
.data(force.nodes()) 
.enter() 
<!-- a function that appends different shapes according to shape information -->

有誰知道如何例/條件添加到append？

來源

2016-11-16 SoftTimur

您可以將一個函數作爲參數傳遞給append。按照API：

如果指定的類型是一個字符串，追加這種類型（標籤名稱）的每個所選元素的最後一個子一個新的元素[...]否則，類型可以是這是每個選定的元素評估功能

的問題是，如果你使用一個功能，你不能簡單地返回「圈子」或「矩形」，像這樣：

.append(function(d){ 
    if(d.shape == "rect"){ 
     return "rect"; 
    } else { 
     return "circle"; 
    } 
});//this don't work...

相反，你必須返回DOM元素，如下所示：

.append(function(d){ 
    if(d.shape == "rect"){ 
     return document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
    } else { 
     return document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
    } 
});//this works...

由於這是一個有點複雜，一個簡單的解決方案（但不完全跟隨你的要求）是簡單地使用symbol這裏：

var circlesOrRects = svg.append("g").selectAll(".foo") 
    .data(force.nodes()) 
    .enter() 
    .append("path") 
    .attr("d", d3.svg.symbol() 
    .type(function(d) { return d.shape == "rect" ? "circle" : "square"; })) 
    .call(force.drag);

這是你斌：https://jsbin.com/povuwulipu/1/edit

來源

2016-11-16 14:18:35

但如果我要指定一些'attr'什麼（例如，'width'和'height'）屬於'rect'但不'circle' ？ – SoftTimur

不幸的是，「方形」符號沒有「寬度」或「高度」，只是「大小」。但是你可以使用一個函數來設置不同符號的大小（圓形，方形等）。 –

那麼我們只能在這裏指定圓和方的常見屬性？ – SoftTimur