Pfad mit aufsteigender Strichbreite

Question

Ich versuche, einen Pfad mit einem aufsteigenden Strichbreite-Attribut in einem Force-Layout zu erstellen. Wenn der Zielwert höher als der Quellwert ist, sollte die Verbindung auf der Zielseite breiter sein.

Das einzige Beispiel, das ich finden konnte, ist dies =>http://jsfiddle.net/bfzsaL3m/2/

ich auch über diese Frage Decreasing Polyline Stroke Width kam. Es sagt, das kann nicht gemacht werden, aber es ist ein bisschen alt.

Im Moment verwendet mein Code .style("stroke-width", function(d) { return Math.sqrt(d.value); }) So wird jede Hilfe geschätzt. Hier ist meine einfache Geige:

https://jsfiddle.net/tekh27my/

Answer 1

Um eine variable Breite Polylinie in Leinwand zu schaffen würden Sie eines von zwei Dingen tun:

• den neuen Pfad entlang der von extrudierten Linienzug Lauf Berechnen Center. Dies muss Joins, Winkel, eingeschlossene Punkte an inneren Ecken, hinzugefügte Dreiecke oder Bögen an äußeren Ecken usw. berücksichtigen (dies kann auf Pfade für SVG und Leinwand angewendet werden).
• Zeichnen Sie die Polylinie segmentiert, was bedeutet, dass Sie für jedes Segment die Dicke, die das Segment mit dem "Runden" -Modus verbindet, erhöhen/verringern. Bei langen Segmenten müssten Sie das Segment auch interpolieren, um steile Änderungen zu vermeiden.

Letzteres wäre die einfachste Lösung der beiden sein:

var ctx = c.getContext("2d"), 
 
    line = [116,34,116,37,116,39,116,49,119,71,126,103,140,141,160,181,190,224,226,263,263, 
 
      293,312,316,363,327,416,328,458,322,491,313,515,295,537,272,557,244,570, 
 
      224,580,208,586,196,591,188,595,182,596,178,598,176,601,174,604,172,605,171], 
 
    line2 = [],   // the interpolated segments 
 
    maxSubSeg = 16,  // number of sub-segements 
 
    minThick = 2,  // taper thickness 
 
    maxThick = 16; 
 

 
// interpolate the line to create more segments 
 
for(var i = 0; i < line.length - 2; i += 2) { 
 
    var x1 = line[i],  // get line positions 
 
     y1 = line[i+1], 
 
     x2 = line[i+2], 
 
     y2 = line[i+3]; 
 
    
 
    for(var j = 0; j < maxSubSeg; j++) { 
 
    line2.push(
 
     x1 + (x2-x1) * (j/maxSubSeg), // interpolate X 
 
     y1 + (y2-y1) * (j/maxSubSeg) // interpolate Y 
 
    ) 
 
    } 
 
} 
 

 
// render new line 
 
ctx.lineCap = "round"; 
 

 
for(var i = 0; i < line2.length - 2; i += 2) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(line2[i], line2[i+1]); 
 
    ctx.lineTo(line2[i+2], line2[i+3]); 
 
    ctx.lineWidth = minThick + maxThick * (i/line2.length); // use length as t [0,1] 
 
    ctx.stroke(); 
 
}

<canvas id=c width=640 height=400></canvas>

Answer 2

Falls sich jemand fragt, wie dies zu tun. Hier ist meine Geige:

https://jsfiddle.net/tekh27my/2/

ich die M und L Attribute des Pfads in der Zecke Funktion berechnet haben:

d3.selectAll(".link") 
     .attr("d", function (d) { 

       var radius = 10; 

        if(d.target.x > d.source.x && d.target.y < d.source.y){ 
         return "M" + d.source.x + "," + d.source.y + " L" + (d.target.x - radius) + "," + (d.target.y - radius) + " L" + (d.target.x + radius) + "," + (d.target.y + radius) + " L" + d.source.x + ", " + d.source.y; 
        }else if(d.target.x < d.source.x && d.target.y > d.source.y){ 
         return "M" + d.source.x + "," + d.source.y + " L" + (d.target.x + radius) + "," + (d.target.y + radius) + " L" + (d.target.x - radius) + "," + (d.target.y - radius) + " L" + d.source.x + ", " + d.source.y; 
        }else{ 
         return "M" + d.source.x + "," + d.source.y + " L" + (d.target.x - radius) + "," + (d.target.y + radius) + " L" + (d.target.x + radius) + "," + (d.target.y - radius) + " L" + d.source.x + ", " + d.source.y;} 
      });