Question

我正在尝试调整代码

http://bl.ocks.org/mbostock/1153292

提供工作流程状态。

这是小提琴

var links = [{
    source: "Start",
    target: "Dept Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Dept Approver",
    target: "Amount>20",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Div Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Section Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Dept Approver",
    type: "reject",
    staus: "completed"
}, {
    source: "Div Approver",
    target: "End",
    type: "approve",
    staus: "dormant"
}, {
    source: "Section Approver",
    target: "End",
    type: "approve",
    staus: "pending"
}];


var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function (link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
    });
    link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
    });
});

var width = 960,
    height = 500;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(80)
    .charge(-300)
    .on("tick", function (d) {
    path.attr("d", function (d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = 0;
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });
    circle.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
    text.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
})
    .start();

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["approve", "reject"])
    .enter().append("marker")
    .attr("id", function (d) {
    return d;
})
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("g").selectAll("path")
    .data(force.links())
    .enter().append("path")
    .attr("class", function (d) {
    return "link " + d.type;
})
    .attr("marker-end", function (d) {
    return "url(#" + d.type + ")";
});

var circle = svg.append("g").selectAll("circle")
    .data(force.nodes())
    .enter().append("circle")
    .attr("r", 8)
    .call(force.drag);

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("text")
    .attr("x", ".40em")
    .attr("y", 12)
    .text(function (d) {
    return d.name;
});

var drag = force.drag()
    .on("dragstart", function (d) {
    d3.select(this).classed("fixed", d.fixed = true);
});

 .link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

#licensing {
  fill: green;
}

.link.licensing {
  stroke: green;
}

.link.reject {
  stroke-dasharray: 0,2 1;
    stroke: red;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 11px sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.fixed {
 /* fill: #00B2EE; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
    <div id="chart"></div>
</body>

http://jsfiddle.net/g3yq9z6g/3/

我已将弧线更改为直线。但是这有一个问题。如果有从NodeA到NodeB的连接器，然后从NodeB到NodeA（拒绝，以红色突出显示），则两条线重叠。

我想知道是否有一种聪明的方法来管理它，例如，拒绝线（红色线）距离另一条线几个像素，因此它们不会重叠。

谢谢

Answer 1

这样的事情：

ERROR ITMS-90032: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons': 'AppIcon29x29'"

ERROR ITMS-90032: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons': 'AppIcon40x40'"

ERROR ITMS-90032: "Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons': 'AppIcon60x60'"

更新了example。

D3.js - 重叠箭头

1 个答案: