diff --git a/html/force-light.css b/html/force-light.css index 540b7a2..8c9c2c5 100644 --- a/html/force-light.css +++ b/html/force-light.css @@ -15,6 +15,11 @@ .link line { stroke: #333; stroke-opacity: 1; + stroke-width: 1.5px; +} + +.link:hover line { + stroke-width: 5px; } .node ellipse { diff --git a/html/force.js b/html/force.js index ffaac29..db217dd 100644 --- a/html/force.js +++ b/html/force.js @@ -199,21 +199,6 @@ force.on("tick", function() { .attr("x2", function(d) { return d.target.x }) .attr("y2", function(d) { return d.target.y }) - link.selectAll(".label") - .attr("transform", function(d) { - π = Math.PI - Δx = d.source.x - d.target.x - Δy = d.source.y - d.target.y - m = Δy/Δx - α = Math.atan(m) - α += Δx<0?π:0 - sin = Math.sin(α) - cos = Math.cos(α) - x = (Math.min(d.source.x, d.target.x) + Math.abs(Δx) / 2) - y = (Math.min(d.source.y, d.target.y) + Math.abs(Δy) / 2) - return "matrix(" + [cos, sin, -sin, cos, x, y].join(",") + ")" - }) - vis.selectAll(".node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) @@ -291,6 +276,10 @@ function reload() { }) } +var linkcolor = d3.scale.linear() + .domain([1, 1.2, 2]) + .range(["#0a3", "orange", "red"]); + function update() { var links = data.links .filter(function (d) { @@ -314,21 +303,17 @@ function update() { linkEnter.append("line") - link.selectAll("path.label") - .remove() - - link.filter(function (d) { - return d.quality != "TT" && d.quality != "1.000" + link.selectAll("line") + .filter( function (d) { + return d.type != 'client' + }) + .style("stroke", function(d) { + return linkcolor(d.quality) + }) + .append("title") + .text( function (d) { + return d.quality }) - .append("path") - .attr("class", "label") - .attr("d", d3.svg.zigzag() - .amplitude(function (d) { - return Math.pow((1 - 1/d.quality), 0.5) * 8; - }) - .len(30) - .angularFrequency(4) - ) link.exit().remove() diff --git a/html/nodes.html b/html/nodes.html index f3b0742..06b3873 100644 --- a/html/nodes.html +++ b/html/nodes.html @@ -8,7 +8,6 @@ - diff --git a/html/zigzag.js b/html/zigzag.js deleted file mode 100644 index 66a8803..0000000 --- a/html/zigzag.js +++ /dev/null @@ -1,57 +0,0 @@ -function zigzag_amplitude(d) { - return d.amplitude; -} - -function zigzag_len(d) { - return d.len; -} - -function zigzag_angularFrequency(d) { - return d.angularFrequency; -} - -d3.svg.zigzag = function() { - var amplitude = zigzag_amplitude, - len = zigzag_len, - angularFrequency = zigzag_angularFrequency; - - function zigzag() { - var A = amplitude.apply(this, arguments), - l = len.apply(this, arguments), - ω = angularFrequency.apply(this, arguments) + 1; - - start = -l/2; - end = l/2; - - step = l/ω; - - var s = "M" + start + ",0"; - - for (var i = 1; i<ω; i++) - s += "L" + (start + i*step) + "," + ((i%2)?A:-A); - - s += "L" + end + ",0"; - - return s; - } - - zigzag.amplitude = function(v) { - if (!arguments.length) return amplitude; - amplitude = d3.functor(v); - return zigzag; - }; - - zigzag.len = function(v) { - if (!arguments.length) return len; - len = d3.functor(v); - return zigzag; - }; - - zigzag.angularFrequency = function(v) { - if (!arguments.length) return angularFrequency; - angularFrequency = d3.functor(v); - return zigzag; - }; - - return zigzag; -};