Soy nuevo en d3. Quería cambiar el color del gráfico, cuando caseDifference es Igual, necesito mostrarlo como color gris. cuando caseDifference es un aumento, necesito mostrarlo como color verde. cuando caseDifference es Decrease, necesito mostrarlo como color rojo. Depuré el código y descubrí que en css están cambiando el color, así que cambié .trend__line a color verde. Pero necesito cambiar dinámicamente sobre la base de caseDifference. Proporcionar fragmento de código y sandbox a continuación.

https://codesandbox.io/s/n6ssk7?file=/src/components/Trend.js

 <defs> <clipPath id="selected-region"> <rect x={0} y={0} width={selectedWidth} height={height} /> </clipPath> </defs> <g ref={yAxisRef} className="trend__y-axis trend__axis" transform={`translate(${yAxisWidth}, 0)`} /> .trend__area { fill: #f7d5d0; } .trend__line { fill: none; stroke: green; stroke-width: 2; } [ { "Date": "2020-01-21", "Confirmed": 1, "caseDifference": "same" }, { "Date": "2020-01-22", "Confirmed": 10, "caseDifference": "Increase" }, { "Date": "2020-01-23", "Confirmed": 5, "caseDifference": "Decrease" }, { "Date": "2020-01-24", "Confirmed": 2, "caseDifference": "Decrease" }, { "Date": "2020-01-25", "Confirmed": 3, "caseDifference": "Increase" }, { "Date": "2020-01-26", "Confirmed": 5, "caseDifference": "Increase" }, { "Date": "2020-01-27", "Confirmed": 5, "caseDifference": "same" }, { "Date": "2020-01-28", "Confirmed": 5, "caseDifference": "same" }, { "Date": "2020-01-29", "Confirmed": 5, "caseDifference": "same" }]