![](/img/trans.png)
[英]d3.js : Want to understand the concept of applying individual properties to elements via a single command
[英]d3.js : Applying styles to individual lines
正在嘗試可拖動的網絡,並希望能夠為不同的鏈接使用不同的顏色。 當我評論出這些台詞時
/*var link = svg.append("g")
.attr("class", "link")
.selectAll("line");*/
並用var link = svg.append("g");
替換它var link = svg.append("g");
所以我可以嘗試逐個添加鏈接,使用if-else條件,我可以為每一行應用不同的線條樣式。 但是當我嘗試將一種風格均勻地應用到所有線條本身時,線條沒有顯示在屏幕上。 Firebug也沒有顯示任何錯誤。
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");
我添加了.attr("class", "link");
部分,認為它將風格應用於線條。 但事實並非如此。 你能幫助選擇性地追加屬性的正確方法嗎?
這是整個代碼:
<!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>
您不需要任何if-else條件,也不需要對現有代碼進行大量修改。 在D3中設置線顏色的方式是通過.style()
命令:
link.style("stroke", ...);
參數不必是固定值,但可以是函數。 然后對選擇中的每個元素(在這種情況下為線條)評估此函數,允許您為它們提供不同的顏色。 例如,如果您想根據源的x
位置給出不同的顏色,則可以執行以下操作。
var color = d3.scale.category20();
link.style("stroke", function(d) { return color(d.source.x); });
您可以使用綁定到元素( d
)的數據的任何部分來確定您想要的顏色,或者其他任何顏色。 例如,要根據索引為每一行設置不同的顏色,您可以這樣做。
link.style("stroke", function(d, i) { return color(i); });
做這個
var link = svg.append("g")
.selectAll("line");
代替
var link = svg.append("g");
現在,您可以看到橙色的所有鏈接。
使用這樣的條件添加類名。
link.data(graph.links).enter()
.append("line")
.attr("class",function(d){
return (d.source.x>400 && d.source.y<300)?'link-b':'link-r';
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.