Cambio continuo de la coloración del package en el layout del package D3

Aloha,

¿hay alguna posibilidad de hacer los packages en esta visualización:

enter image description here

… se parecen a los packages en esa visualización

enter image description here

?

No tengo idea de cómo lograr esto en d3.

EDIT 1: Obviamente tengo que escribir un interpolador personalizado. ¿Cómo puedo extender el interpolador de packages para interpolar adicionalmente entre dos colors sin cambiar la biblioteca d3?

Desafortunadamente, ni SVG ni Canvas soportan acariciar un degradado a lo largo de una ruta. La forma en que se implementa mi visualización del tree de dependencies es la siguiente. Para cada ruta:

  1. Comience con una spline base (vea Hierarchical Edge Bundling ).
  2. Convierta a una curva Bézier cubo por partes (vea BasisSpline.segments ).
  3. Convierta a una curva lineal por partes ( es decir , polilínea, vea Path.flatten ).
  4. Divida en segmentos lineales de igual longitud (vea Path.split ).

Una vez que tenga estos segmentos lineales, coloree cada segmento calculando el color apropiado a lo largo del degradado. Entonces, el primer segmento se dibuja en verde, el último segmento se dibuja en rojo y los segmentos intermedios se dibujan con un color en algún punto intermedio. Podría ser posible combinar los pasos 2-4 muestreando la spline base en puntos equidistantes, pero eso requerirá más matemáticas.

Mi tree de dependencies se implementa en Canvas, pero se puede lograr el mismo efecto en SVG creando elementos de ruta separados (o elementos de línea) para cada segmento de color constante. Puede get un performance ligeramente mejor al combinar segmentos del mismo color.

Intereting Posts