diff --git a/html/force.js b/html/force.js index d5ea14c..4cb07cf 100644 --- a/html/force.js +++ b/html/force.js @@ -1,3 +1,62 @@ +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; +}; + + function getOffset( el ) { var _x = 0; var _y = 0; @@ -129,14 +188,27 @@ function render_graph(type) { .attr("class", "link") .style("stroke-width", function(d) { return Math.min(1, d.strength * 2); }); - var linklabel = vis.selectAll("text") - .data(linkdata.filter(function (d) {return d.quality != "TT"})) + var linklabel = vis.selectAll("g") + .data(linkdata.filter(function (d) {return d.quality != "TT" && d.quality != "1.000"})) .enter() - .append("text") - .attr("text-anchor", "middle") - .attr("color", "#000") - .attr("class", "strength") - .text(function (d) { return d.quality; }); + .append("g") + .append("path") + .attr("d", d3.svg.zigzag().amplitude(function (d) { + return Math.pow((1 - 1/d.quality), 0.5) * 8; + }).len(30).angularFrequency(4) +/* + d3.svg.arc().outerRadius(5).innerRadius(0) + .startAngle( function (d) { + return Math.PI/d.quality - Math.PI/2; + }) + .endAngle( function (d) { + return -Math.PI/d.quality - Math.PI/2; + }) + */ + ) + .attr("fill", "transparent") + .attr("stroke", "#C83771") + .attr("stroke-width", "1px")     function isConnected(a, b) {         return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index; @@ -161,6 +233,9 @@ function render_graph(type) {             link.style("stroke-opacity", function(o) {                 return o.source === d || o.target === d ? 1 : opacity;             }); +             linklabel.style("opacity", function(o) { +                 return o.source === d || o.target === d ? 1 : opacity; +             });         };     } @@ -219,10 +294,6 @@ function render_graph(type) { .append("g"); uplink_info.append("path") - .attr("width", 16) - .attr("height", 16) - .attr("x", 0) - .attr("y", 0) .attr("d","m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922 12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097 -3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426 -1.1549641,10.561363 -10.3735326,10.701179 z") .style("fill", "#333"); @@ -239,9 +310,19 @@ function render_graph(type) { .attr("y2", function(d) { return d.target.y; }); linklabel - .attr("x", function(d) { return Math.min(d.source.x, d.target.x) + Math.abs(d.source.x - d.target.x) / 2; }) - .attr("y", function(d) { return Math.min(d.source.y, d.target.y) + Math.abs(d.source.y - d.target.y) / 2; }); - + .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(",") + ")"; + }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); });