Soy nuevo en d3, y había estado leyendo sus documentos y mirando ejemplos, pero nada se acerca a lo que necesito. Estoy usando reaccionar y mecanografiado.
Necesito crear 2 funciones, una debería verse así:
mapColor(value, lowerBoundColor, upperBoundColor) @param value {float} - A decimal float which is between 0 and 1. @param lowerBoundColor {string} - A hex color code corresponding to a value of 0. @param upperBoundColor {string} - A hex color code corresponding to a value of 1. @returns {string} - A hex color code corresponding to the value parameter passed in.Y el segundo así:
linearMap(value, lowerBound, upperBound) @param value {float} - A decimal float between lowerBound and upperBound. @param lowerBound {float} - A decimal float which represents the minimum value of the dataset to be clamped. @param upperBound {float} - A decimal float which represents the maximum value of the dataset to be clamped @returns {float} - A decimal float between 0 and 1 which corresponds to the value parameter passed in.Esto es lo que tengo hasta ahora:
import React from 'react' import * as d3 from 'd3' var data = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8,0.9,1] const mapColor = d3.scaleLinear() .domain([0,1]) .range(["f4a261", "264653"])¿Cómo puedo crear esas 2 funciones para reaccionar a dónde se pueden usar como componente en el futuro?
# . Entonces, el rango debería ser ["#f4a261", "#264653"]. Las funciones reutilizables deberían verse así: function mapColor(value, lowerBoundColor, upperBoundColor) { return d3.scaleLinear() .domain([0,1]) .range([lowerBoundColor, upperBoundColor])(value) } function linearMap(value, lowerBound, upperBound) { return d3.scaleLinear() .domain([lowerBound, upperBound]) .range([0,1])(value) }Aunque creo que deberías crearlos usando funciones de orden superior, así:
function createLinearMap(lowerBound, upperBound) { return d3.scaleLinear() .domain([lowerBound, upperBound]) .range([0,1]) } // Using the HOF const linearMap = createLinearMap(0, 5) console.log(linearMap(2)) // 0.4