Menu
I'm new to d3js, in my understanding.
// 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();
But in my code, it recreate a node.
Here is my full code http://jsfiddle.net/yunfanyunfan/URpfB/34/
click the line, will appear many lines, because the duplicate node not removes.
413
.attr('d',
needs to be on the UPDATE+ENTER selection because the enter
selection will be zero size since you are re-using the existing path
each time.// 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
