我是 d3 的新手，我一直在閱讀他們的檔案并查看示例，但沒有什么能接近我所需要的。我正在使用反應和打字稿。
我需要創建 2 個函式，一個應該是這樣的：
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.
第二個是這樣的：
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.
這是我到目前為止所擁有的：
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"])
我如何創建這兩個函式以回應它們將來可以用作組件的位置。
uj5u.com熱心網友回復：
- 有效的十六進制顏色必須以
#. 所以范圍應該是 ["#f4a261", "#264653"]。可重用函式應如下所示：
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)
}
雖然我認為您應該使用高階函式創建這些，如下所示：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427204.html
標籤：javascript 反应 打字稿 d3.js
上一篇：多個工具提示在反應中未正確顯示