d3.js: Anwenden von Stilen auf einzelne Linien
Ich habe das ausprobiertziehbares Netzwerk und wollte in der Lage sein, verschiedene Farben für verschiedene Links zu verwenden. Als ich die Zeilen auskommentierte
/*var link = svg.append("g")
.attr("class", "link")
.selectAll("line");*/
und ersetzte es mitvar link = svg.append("g");
so dass ich versuchen konnte, Links nacheinander hinzuzufügen, mit if-else-Bedingungen, bei denen ich jeder Zeile einen anderen Linienstil zuweisen konnte. Aber als ich versuchte, nur einen einzigen Stil gleichmäßig auf alle Linien anzuwenden, wurden die Linien nicht auf dem Bildschirm angezeigt. Firebug zeigte auch keinen Fehler.
link = link.data(graph.links).enter().append("line")
.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("class", "link");
Ich hatte das hinzugefügt.attr("class", "link"); Abschnitt und dachte, dass es den Stil auf die Linien anwenden würde. Aber es hat nicht geklappt. Könnten Sie helfen, Attribute auf die richtige Weise selektiv anzuhängen?
Dies ist der gesamte Code:
<!DOCTYPE html>
<meta charset="utf-8">
<svg id="mySvg" width="20" height="20">
<defs id="mdef">
<pattern id="image" x="0" y="0" height="20" width="20">
<image x="0" y="0" width="20" height="20" xlink:href="url.png"></image>
</pattern>
</defs>
<defs>
<pattern id="tile-ww" patternUnits="userSpaceOnUse" width="25" height="25">
<image xlink:href="url.png" x="15" y="15" width="15" height="15"></image></pattern>
</defs>
</svg>
<style>
.node {
stroke: green;
stroke-width: 1px;
opacity: 0.8;
fill: url(#image);
}
.node .selected {
stroke: red;
}
.link {
stroke: orange;
stroke-width: 3;
stroke-dasharray: 20,10,5,5,5,10;
opacity: 0.5;
}
.dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
.brush .extent {
fill-opacity: .1;
stroke: #fff;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="d3/d3.v3.js"></script>
<script>
var width = 960, height = 500, shiftKey;
var svg = d3.select("body")
.attr("tabindex", 1)
.on("keydown.brush", keydown)
.on("keyup.brush", keyup)
.each(function() { this.focus(); })
.append("svg")
.attr("width", width)
.attr("height", height);
/*var link = svg.append("g")
.attr("class", "link")
.selectAll("line");*/
var link = svg.append("g");
var brush = svg.append("g")
.datum(function() { return {selected: false, previouslySelected: false}; })
.attr("class", "brush");
var node = svg.append("g")
.attr("class", "node")
.selectAll("circle");
//Add the SVG Text Element to the svgContainer
text = svg.append('text').text('This is some information about whatever')
.attr('x', 50)
.attr('y', 200)
.attr('fill', 'black');
//you can delete this circle
svg.append("circle")
.attr("class", "logo")
.attr("cx", 225)
.attr("cy", 225)
.attr("r", 20)
.style("fill", "transparent")
.style("stroke", "black")
.style("stroke-width", 0.25)
.on("mouseover", function(){
d3.select(this)
.style("fill", "url(#image)");
})
.on("mouseout", function(){
d3.select(this)
.style("fill", "transparent");
});
//get the json file with either error messages or the entire data as "graph" object
d3.json("graph.json", function(error, graph) {
//"links" is a property in "graph", and contains some data in it. Iterate through all of them
graph.links.forEach(function(d) //iterate through each data object in link
{
d.source = graph.nodes[d.source];//we got nodes too, with graph so access its data
d.target = graph.nodes[d.target];
d.linkStatus = d.status;
console.log(d.source);
});
link = link.data(graph.links).enter().append("line")
.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("class", "link");
brush.call(d3.svg.brush()
.x(d3.scale.identity().domain([0, width]))
.y(d3.scale.identity().domain([0, height]))
.on("brushstart", function(d) {
node.each(function(d) { d.previouslySelected = shiftKey && d.selected; });
})
.on("brush", function() {
var extent = d3.event.target.extent();
node.classed("selected", function(d) {
return d.selected = d.previouslySelected ^
(extent[0][0] <= d.x && d.x < extent[1][0]
&& extent[0][1] <= d.y && d.y < extent[1][1]);
});
})
.on("brushend", function() {
d3.event.target.clear();
d3.select(this).call(d3.event.target);
}));
node = node.data(graph.nodes).enter().append("circle")
.attr("r", 10)//radius
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.on("mousedown", function(d) {
if (!d.selected) { // Don't deselect on shift-drag.
if (!shiftKey) node.classed("selected", function(p) { return p.selected = d === p; });
else d3.select(this).classed("selected", d.selected = true);
}
})
.on("mouseup", function(d) {
if (d.selected && shiftKey) d3.select(this).classed("selected", d.selected = false);
})
.call(d3.behavior.drag()
.on("drag", function(d) { nudge(d3.event.dx, d3.event.dy); }));
});
function nudge(dx, dy)
{
node.filter(function(d) { return d.selected; })
.attr("cx", function(d) { return d.x += dx; })
.attr("cy", function(d) { return d.y += dy; })
link.filter(function(d) { return d.source.selected; })
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; });
link.filter(function(d) { return d.target.selected; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
d3.event.preventDefault();
}
function keydown()
{
if (!d3.event.metaKey) switch (d3.event.keyCode) {
case 38: nudge( 0, -1); break; // UP
case 40: nudge( 0, +1); break; // DOWN
case 37: nudge(-1, 0); break; // LEFT
case 39: nudge(+1, 0); break; // RIGHT
}
shiftKey = d3.event.shiftKey || d3.event.metaKey;
}
function keyup()
{
shiftKey = d3.event.shiftKey || d3.event.metaKey;
}
</script>