Javascript D3.js在决策树中绘制菱形和连接链接

我正在使用D3处理下面的布局（决策树），我需要为流程图中的“决策”节点绘制菱形，其余节点是动作（矩形）

从逻辑上讲，所有具有子节点的节点都是菱形。下面是用户体验可视化

我在这里为自上而下的D3图表提供了一个JSFIDLE：

但是现在所有的svg元素都是矩形，所有的线都是通过“曲线”链接连接的，我希望svg是“决策”的菱形节点和链接类似于上述图像，源自菱形的两个角，如果下一个是决策，则终止于菱形的顶部，如果下一个是动作，则终止于矩形的顶部

var保证金={
前20名，
右:120,，
底数：20，
左：120
},
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
变量emptyDecisionBox={
“名称”：“新决定”，
“id”：“newId”，
“值”：“不确定”，
“条件”：“真”，
};
var选择节点；
变量根={
“名称”：“根”，
“儿童”：[{
“名称”：“分析”，
“类型”：“决定”，
“价值”：“a+b”，
“儿童”：[{
“名称”：“区别”，
“类型”：“操作”，
“条件”：“真”，
“价值”：“5”，
}, {
“名称”：“无区别”，
“类型”：“操作”，
“条件”：“假”，
“值”：“4”
}],
},
{
“名称”：“分部”，
“类型”：“操作”，
“价值”：“a-b”，
“儿童”：[…]，
}
]
};
var i=0，
持续时间=750，
rectW=60，
rectH=30；
var tree=d3.layout.tree（）.nodeSize（[70,40]）；
var diagonal=d3.svg.diagonal（）
.投影（功能（d）{
返回[d.x+rectW/2，d.y+rectH/2]；
});
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，1000）.attr（“height”，1000）
.call（zm=d3.behavior.zoom（）.scaleExtent（[1,3]）.on（“zoom”，redraw））.append（“g”）
.attr（“转换”、“转换”（+350+）、“+20+”）；
//必要的，以便缩放知道从何处缩放和取消缩放
zm.translate（[350,20]）；
//新部件
var plusButton=svg
.append（'g'）
.classed（'button'，true）
.classed（'hide'，true）
.on（'单击'，函数（））{
控制台日志（“单击”）；
});
加钮扣
.append（'rect'）
.attr（'transform'，'translate（-8，-8）//将按钮置于'g'内的中心`
.attr（'width'，16）
.attr（'height'，16）
.attr（'rx'，2）；
加钮扣
.append（'路径'）
.attr（'d'，'M-60 H6 M0-6 V6'）；
var rectangleShape=svg.append（'g'）
.classed（'button'，true）
.classed（'hide'，true）
.on（'单击'，函数（））{
移除所有按钮元素（）；
})
矩形
.append（'rect'）
.attr（'宽度'，40）
.attr（'height'，20）
.样式（“填充”、“橙色”）；
var diamondImage=svg.append（'g'）
.classed（'button'，true）
.classed（'hide'，true）
.classed（'scale'，true）
.on（'单击'，函数（））{
addElement（selectedNode）；
console.log（“点击钻石”）；
log（“将hide设置为true”）；
移除所有按钮元素（）；
});
钻石图像
.append（'路径'）
.attr（'d'，'M2040200Z'）
.样式（“填充”、“橙色”）；
var rectangleshapevalse=svg.append（'g'））
.classed（'button'，true）
.classed（'hide'，true）
.on（'单击'，函数（））{
log（“单击矩形”）；
移除所有按钮元素（）；
})
矩形
.append（'rect'）
.attr（'宽度'，40）
.attr（'height'，20）
.样式（“填充”、“橙色”）；
var diamondImageFalse=svg.append（'g'）
.classed（'button'，true）
.classed（'hide'，true）
.classed（'scale'，true）
.on（'单击'，函数（））{
console.log（“点击钻石”）；
log（“将hide设置为true”）；
移除所有按钮元素（）；
});
钻石假象
.append（'路径'）
.attr（'d'，'M2040200Z'）
.样式（“填充”、“橙色”）；
函数removeAllButtonElements（）{
plusButton.classed（'hide'，true）；
diamondImage.classed（'hide'，true）；
矩形形状。分类为（'hide'，true）；
diamondImageFalse.classed（'hide'，true）；
矩形形状参数.classed（'hide'，true）；
}
//新部分结束。
root.x0=0；
root.y0=高度/2；
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
d、 children=null；
}
}
/*根。子。forEach（塌陷）*/
更新（根）；
d3.选择（“#体”）样式（“高度”、“800px”）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
nodes.forEach（函数（d）{
d、 y=d.深度*180；
});
//更新节点…
var node=svg.selectAll（“g.node”）
.数据（节点、功能（d）{
返回d.id | |（d.id=++i）；
});
//在父节点的上一个位置输入任何新节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x0+”，“+source.y0+”）；
})
。开启（“点击”，点击）；
nodeEnter.append（“rect”）
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，1）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
/*nodeEnter.append（'path'）.attr（“d”，d3.svg.symbol（）.type（函数（d）{return“circle}））；
*/
nodeEnter.append（“文本”）
.attr（“x”，rectW/2）
.attr（“y”，矩形/2）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d.name；
});
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
nodeUpdate.select（“rect”）
.attr（“宽度”，rectW）
.attr（“高度”，矩形）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，1）
.样式（“填充”，功能（d）{
返回d.#儿童？“淡蓝色”：“fff”；
});
nodeUpdate.se