Javascript 如果数据介于 0 和 1 之间，如何使用对数采样使用 D3 创建图例

const itemColor = [{
    offset: 0.0,
    color: "#ff0000"
  },
  {
    offset: 0.2,
    color: "#ffff00"
  },
  {
    offset: 0.4,
    color: "#00ff00"
  },
  {
    offset: 0.6,
    color: "#00ffff"
  },
  {
    offset: 0.8,
    color: "#0000ff"
  },
  {
    offset: 1.0,
    color: "#ff00ff"
  }
];

const svg = d3.select("svg");
const colorScale = d3.scaleSymlog().domain([0, 1]).range([0, 400]); // in my case min and max are [0, 1]
const colorScale2 = d3.scaleLinear().domain([0, 1]).range([0, 400]); // in my case min and max are [0, 1]
const id = "linear-gradient-0";
const linearGradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", id)
  .attr("x1", "0%")
  .attr("x2", "100%")
  .attr("y1", "0%")
  .attr("y2", "0%");

// append the color
linearGradient
  .selectAll("stop")
  .data(itemColor)
  .enter()
  .append("stop")
  .attr("offset", function(data) {
    return colorScale(data.offset) / 4 + "%";
  })
  .attr("stop-color", function(data) {
    return data.color;
  });

const linearGradient2 = svg.append("defs")
  .append("linearGradient")
  .attr("id", "linear-gradient-1")
  .attr("x1", "0%")
  .attr("x2", "100%")
  .attr("y1", "0%")
  .attr("y2", "0%");

// append the color
linearGradient2
  .selectAll("stop")
  .data(itemColor)
  .enter()
  .append("stop")
  .attr("offset", function(data) {
    return colorScale2(data.offset) / 4 + "%";
  })
  .attr("stop-color", function(data) {
    return data.color;
  });

// draw the rectangle and fill with gradient
svg.append("rect")
  .attr("x", 10)
  .attr("y", 18)
  .attr("width", 400)
  .attr("height", 20)
  .style("fill", "url(#linear-gradient-0)");

// create tick
svg.append("g").attr("transform", "translate(10,45)").call(d3.axisBottom(colorScale));

// draw the rectangle and fill with gradient
svg.append("rect")
  .attr("x", 10)
  .attr("y", 88)
  .attr("width", 400)
  .attr("height", 20)
  .style("fill", "url(#linear-gradient-1)");

// create tick
svg.append("g").attr("transform", "translate(10,115)").call(d3.axisBottom(colorScale2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.0/d3.min.js"></script>
<svg width="500"></svg>