6
Tôi là một chút mới đối với SVG và d3.js.Điểm đánh dấu SVG không định hướng đúng trên đường cong d3.svg.diagonal được sử dụng làm liên kết bố cục lực D3
Khi vẽ đồ thị có bố cục lực D3, tôi đang sử dụng trình tạo đường chéo đơn giản và sử dụng điểm đánh dấu để vẽ đầu mũi tên.
Khi sử dụng vòng cung thay vì máy phát đường chéo, đầu mũi tên chỉ xuất hiện tốt. Nhưng sử dụng máy phát điện chéo như trong các mã dưới đây không tạo ra các dấu hiệu thích hợp:
var vis = this.vis = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.gravity(0.03)
.distance(120)
.charge(-800)
.size([w, h]);
var linkDiag = d3.svg.diagonal()
.projection(function(d)
{
return [d.x, d.y];
});
vis.append("svg:defs")
.selectAll("marker")
.data(["normal", "special", "resolved"])
.enter()
.append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M 0,-5 L 10,0 L0,5");
... và sau đó thêm:
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
.attr("d", linkDiag)
.attr("marker-end", function(d) { return "url(#special)"; });
});
Các dấu hiệu không định hướng ở tất cả với các đỉnh.
Bất kỳ trợ giúp sẽ được đánh giá cao!
Bất kỳ cơ hội nào bạn có thể giải quyết vấn đề này? Trong trường hợp của tôi, tôi nhận ra rằng các nút tròn của tôi lớn và điểm đánh dấu đã được hiển thị, nhưng luôn luôn được hiển thị phía sau vòng tròn. Tuy nhiên, tôi vẫn gặp sự cố, xác định giá trị refX, refY, v.v. phù hợp cho điểm đánh dấu:/ – dchang
Tôi cũng tò mò nếu có giải pháp cho vấn đề này. –