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

并将其附加到enter事件

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

在D3中箭头不会根据条件进行调用

1 个答案: