时间戳

首页 > 解决方案 > 安全地使用图例定义图例后如何格式化图例中的数字

javascript - 安全地使用图例定义图例后如何格式化图例中的数字

问题描述

我需要格式化与图例相关的数字。

这是定义图例的代码：

   MapChart.prototype.addLegend = function() {
  let vis = this;

  let formatComma = d3.format(",");


  let legendData = vis.color.ticks(6).slice(0);
  let formattedLegendData = legendData.map(each => formatComma(each));

  vis.legend = vis.svg
    .selectAll(".legend")
    .data(legendData)
    .enter()
    .append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(" + 20 + "," + (20 + i * 20) + ")";
    });

  vis.legend
    .append("rect")
    .attr("width", 20)
    .attr("height", 20)
    .style("fill", vis.color);

  vis.legend
    .append("text")
    .attr("x", 26)
    .attr("y", 10)
    .attr("dy", ".35em")
    .text(String);

  vis.svg
    .append("text")
    .attr("class", "label")
    .attr("x", vis.dimensions.width + 20)
    .attr("y", 10)
    .attr("dy", ".35em");
};

formattedLegendData给了我想要的格式，但legendData给了我正确的颜色。使用formattedLegendData，所有图例块都显示为黑色。

我怎样才能拥有两者，即格式化的图例编号和正确的图例颜色。

console.log(legendData); // [0, 50000, 100000, 150000, 200000, 250000, 300000, 350000]
console.log(formattedLegendData); //["0", "50,000", "100,000", "150,000", "200,000", "250,000", "300,000", "350,000"]

标签： javascriptd3.js

解决方案

如果我理解正确，

您可以传递legendData给，.data()因为您的值在legendData您的规模范围内：它们是数字。因此，比例 ( viz.color) 返回有效颜色作为填充。这就是您在这里获得正确颜色的原因。

当您传递formattedLegendData给.data()时，当您使用时，.style("fill", vis.color);您将字符串值传递给刻度。由于"10,000"不太可能在您的域中，比例尺不知道如何为输入插入一个值，您会得到一个黑色方块。

相反，将刻度值直接传递给.data()，然后在添加文本时应用格式，例如：

.text(formatter)

如下：

let color = d3.scaleSequential(d3.interpolateRdBu)
  .domain([0,5000])

let formatComma = d3.format(",");
let legendData = color.ticks(6).slice(0);

let formattedLegendData = legendData.map(each => formatComma(each));

let svg = d3.select("body").append("svg")

let legend = svg
    .selectAll(".legend")
    .data(legendData)
    .enter()
    .append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(" + 20 + "," + (20 + i * 20) + ")";
    });

  legend
    .append("rect")
    .attr("width", 20)
    .attr("height", 20)
    .style("fill", color);

  legend
    .append("text")
    .attr("class", "label")
    .attr("x", 30)
    .attr("y", 10)
    .attr("dy", ".35em")
    .text(formatComma);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

推荐阅读