以我的理解，我是d3js的新手。
// links is an array and id is unique key
var pathData = paths.data(links, function(d) {return d.id;});
pathData.enter().append('').attr() ...
// in there will be delete all the duplicate items
pathData.exit().remove();
但是在我的代码中，它重新创建了一个节点。
这是我的完整代码http://jsfiddle.net/yunfanyunfan/URpfB/34/
单击该行，将出现很多行，因为重复的节点不会删除。
.attr('d',需求是在UPDATE + Enter选择，因为进入的选择将是零大小，因为你是重新使用现有的路径各一次。// set up SVG for D3
var width = 960,
height = 800;
var isWantToAddNode = false;
var svg = d3.select('body').select('svg')
.attr('width', width)
.attr('height', height);
var links = [{
id:1,
fromPoint: {x:5,y:5},
toPoint: {x:50,y:50},
params: 'android',
color: '#000'
}];
var times = 0;
function initAllDef() {
svg.select('#defs').append('svg:marker')
.attr('id', 'arrow').attr("viewBox", "0 -5 10 10")
.attr("refX", 9)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-3L10,0L0,3")
.attr('fill', '#000');
}
initAllDef();
// handles to link and node element groups
var paths = svg.select('#paths').selectAll('path');
var routeNodes = svg.select('#rects').selectAll('rects');
// update graph (called when needed)
function restart() {
function rebuildLink() {
//need a live selection
var pathData = svg.select('#paths').selectAll('path').data(links, function(d){
return d.id;
});
pathData.enter()
.append('svg:path')
.attr('class', 'link')
.style('marker-end', 'url(#arrow)')
.on('mousedown', function(d){
times += 1;
restart();
});
//path needs to be on update+enter
pathData.attr('d', function(d) {
var f = d.fromPoint, t = d.toPoint;
return 'M' + (f.x + times * 10) + ',' + (f.y) + 'L' + t.x + ',' + t.y;
});
pathData.exit().remove();
}
rebuildLink();
}
function getStartPoint(rect) {
return {
x: rect.x + (rect.width>>1),
y: rect.y + rect.height
}
}
function getEndPoint(rect) {
return {
x: rect.x + (rect.width>>1),
y: rect.y
}
}
restart();svg {
background-color: #FFF;
/*cursor: default;*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
svg:not(.active):not(.ctrl) {
cursor: crosshair;
}
path.link {
fill: none;
stroke: black;
stroke-width: 2px;
cursor: default;
}
svg:not(.active):not(.ctrl) path.link {
cursor: pointer;
}
path.link.selected {
stroke-dasharray: 10,2;
color: blue;
stroke: blue;
}
path.link.dragline {
pointer-events: none;
}
path.link.hidden {
stroke-width: 0;
}
circle.node {
stroke-width: 1.5px;
cursor: pointer;
}
circle.node.reflexive {
stroke: #000 !important;
stroke-width: 2.5px;
}
rect.route-node {
cursor: pointer;
stroke-width: 1px;
}
text {
font: 12px sans-serif;
pointer-events: none;
}
text.id {
text-anchor: middle;
font-weight: bold;
}
input {
width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<svg>
<defs id="defs"></defs>
<g id="paths"></g>
<g id="rects"></g>
</svg>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句