在D3箭頭不根據條件調用

Question

在我的代碼中，我嘗試根據我的d3應用程序中的條件鏈接幾個svg rect元素和箭頭（svg標記）。 rects創建沒有任何問題，但沒有箭頭產生。但類似的方法正在我的其他例子。 這裏是我的代碼：

var rect = canvas.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .filter(condition) 
    .attr("class", function(d) { return d.children ? "parent" : "child"; }) 
    .attr("x", function(d) { return d.x + 20 ; }) 
    .attr("y", function(d) { return d.y + 30 ; }) 
    .attr("width", 30) 
    .attr("height", 30) 
    .attr("opacity", 0.25); 

的箭頭代碼和行：

//Create definition for arrowhead: 
    rect.append("defs").append("marker") 
    .attr("id", "arrowhead") 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 0) 
    .attr("refY", 0) 
    .attr("markerUnits", "strokeWidth") 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M0,-5L10,0L0,5"); 
    .... 
    // Connecting the arrow and the line (not working) 
    rect.selectAll("rect").append("line") 
    .filter(condition) 
    .attr("x1", function(d) { getting x1 values }) 
    .attr("y1", function(d) {getting y1 values }) 
    .attr("x2", function(d) {getting x2 values) 
    .attr("y2", function(d) {getting y2 values) 
    .attr("stroke", "black") 
    .attr("stroke-width", 1.5) 
    .attr("marker-end", "url(#arrowhead)") 
    .attr("fill", "none"); 

任何想法將如何產生所有箭頭..

Answer 1

如果我深知你需要繪製一個箭頭嵌套到矩形，嘗試使用此定義：

svg.append('defs').append('marker') 
.attr('id', 'arrow').attr('viewBox', '0 0 10 10') 
.attr('refX', 10).attr('refY', 5) 
.attr('markerUnits', 'strokeWidth') 
.attr('markerWidth', 8) 
.attr('markerHeight', 6) 
.attr('orient', 'auto') 
.append('path') 
.attr('d', 'M 0 0 L 10 5 L 0 10 z'); 

並將其附加到輸入e通風口

var rect = canvas.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .filter(condition) 
    .attr("class", function(d) { return d.children ? "parent" : "child"; }) 
    .attr("x", function(d) { return d.x + 20 ; }) 
    .attr("y", function(d) { return d.y + 30 ; }) 
    .attr("width", 30) 
    .attr("height", 30) 
    .attr("opacity", 0.25) 
    .append('line') 
    .attr('class','path') 
    .attr('marker-end','url(#arrow)');