Question

我正在创建2个比例尺，将其应用于Choropleth映射以使统计数据可视化。

我已经使地图正确运行，并且正在尝试实现图例来解释这两个比例。

到目前为止，我有一个部分起作用的传奇人物。但是，对于“颜色渐变”，我相信我在给它介于1到100之间的有效百分比时遇到了问题。

这是我的react函数，可以生成图例。

function GenLegend(props) {
  let svgLegend = d3.select(props.name);
  svgLegend.html("");
  var defs = svgLegend.append("defs");

  // append a linearGradient element to the defs and give it a unique id
  const id = "linear-gradient".concat(props.lower, props.upper);

  var linearGradient = defs.append("linearGradient").attr("id", id);

  // horizontal gradient
  linearGradient
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%");

  // append multiple color stops by using D3's data/enter step

  linearGradient
    .selectAll("stop")
    .data(props.scale.domain())
    .enter()
    .append("stop")
    .attr("offset", function(d) {
      return d + "%";
    })
    .attr("stop-color", function(d) {
      return props.scale(d);
    });

  // append title
  svgLegend
    .append("text")
    .attr("class", "legendTitle")
    .attr("x", 0)
    .attr("y", 20)
    .style("text-anchor", "left")
    .text(props.string);

  // draw the rectangle and fill with gradient
  svgLegend
    .append("rect")
    .attr("x", 10)
    .attr("y", 30)
    .attr("width", 400)
    .attr("height", 15)
    .style("fill", `url(#${id})`);

  //create tick marks
  var xLeg = d3
    .scaleLinear()
    .domain([props.lower, props.upper])
    .range([10, 400]);

  var axisLeg = d3.axisBottom(xLeg).tickValues(props.scale.domain());

  svgLegend
    .attr("class", "axis")
    .append("g")
    .attr("transform", "translate(0, 40)")
    .call(axisLeg);
  return <> </>;
}

我通过以下方式将此组件称为我的maxCount可以是1到100,000之间的任何数字

  const countCol = scaleLinear()
    .domain([0, maxCount / 8, maxCount / 3, maxCount])
    .range(["#ffffff", "#74C67A", "#1D9A6C", "#000102"]);

      <GenLegend
        scale={countCol}
        upper={maxCount}
        lower={0}
        name="#legend-count"
        string="Offences Legend"
      />

<svg id="legend-count" className="legend" />

我还有一个单独的比例尺，其中的值是相反的在此示例中，max和min可以是100,000到0.001之间的任何数字

  const popCol = scaleLinear()
    .domain([max, max / 2, min * 2, min])
    .range(["#ffffff", "#74C67A", "#1D9A6C", "#000102"]);
      <GenLegend
        scale={popCol}
        upper={min}
        lower={max}
        name="#legend-pop"
        string="Offences/Capita Legend"
      />

<svg id="legend-count" className="legend" />

目前，当我尝试此操作时，它返回的外观如下：

可以在图像上看到较低/较高的值。当我在第一个图例中尝试使用数字（例如0和10000）时，我只会看到白色到浅绿色的渐变，我相信这是因为它会将值视为百分比。另外，理想情况下，我希望x轴刻度线之间的距离相等，而不要与重叠的原始域保持不变。

React中具有线性比例的D3渐变图例

0 个答案: