0
258
VistasCómo establecer una opacidad variable de puntos en un diagrama de dispersión D3
Así que hice este diagrama de dispersión usando D3 con puntos para cada punto de datos.
svg.append("g") .selectAll("dot") .data(data) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.PC); }) .attr("cy", function(d) { return yScale(d.TRIN_NORM); }) .attr("r", 2) .attr("opacity", 1.0) // HERE JUST SET OVERALL OPACITY .style("fill", "Blue")Aquí hay una imagen del gráfico:
Las columnas PC y TRIN_NORM son ambas de 1000 entradas.
Ahora me gustaría que la opacidad de cada círculo varíe según su posición en la matriz. Por ejemplo, haga que la opacidad varíe de i=0 a 999 tal que:
opacity(i) = 0.05 + (1.0-0.05)/999 * iLa opacidad varía de 0,05 a 1,0 para el último punto de datos.
¿Cómo puedo conseguir esto? Solo soy un principiante en javascript y D3, por lo que cualquier ayuda sería muy apreciada.
====
También logré cambiar los colores de los círculos, como se sugiere a continuación.
.attr("opacity", function(d, i) { return 0.05 + (1.0 - 0.05) / 999 * i; }) .style("fill", function(d, i) { return d3.interpolatePlasma((999 - i) / 999); })1 Respuestas
Responde la pregunta0
En la firma de la función para el atributo de opacidad (y otros) puede usar function(d, i) en lugar de function(d) donde i es el índice del elemento de data en la selección.
Como sabes la fórmula que quieres, es solo:
.attr("opacity", function(d, i) { return 0.05 + (1.0-0.05)/999 * i; })Aquí hay un ejemplo con 10 círculos (y por lo tanto 9 en lugar de 999 en el ejemplo):
// svg const svg = d3.select("body") .append("svg") .attr("width", 320) .attr("height", 100); // sample array let data = []; for (let i=0; i<10; i++) { data.push({"name": "dot_" + i, "someProperty": "someValue"}); } // 10 dots in a line with opactiy linked to index svg.append("g") .selectAll("dot") .data(data) .enter() .append("circle") .attr("cx", function(d, i) { //return xScale(d.PC); return (i * 28) + 16; }) .attr("cy", function(d) { //return yScale(d.TRIN_NORM); return 50; }) .attr("r", 12) .attr("opacity", function(d, i) { //return 100; return 0.05 + (1.0 - 0.05) / 9 * i }) .style("fill", "Blue") <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>