如何处理D3中数据差异较大的情况

Question

我是 D3 新手，正在学习如何制作条形图。

我的数据集范围很大。

dataset = [12, 15, 60, 10000, 70000, 90000, 0.0002]

我正在根据该数据集制作一个条形图，它看起来很奇怪。您如何处理数据集中的巨大差异，以便条形图看起来更有意义？因为现在 0.0002 和 12 具有相同的大小，这看起来有点奇怪。我将不胜感激任何建议。提前谢谢你:)

这是我的代码和输出：

<body>
  <script>
    const dataset = [12, 15, 60, 10000, 70000, 90000, 0.0002];
    
    const w = 500;
    const h = 300;
    const svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
    
    //create scale
    const scale = d3.scaleLinear()
        .domain([d3.min(dataset), d3.max(dataset)])
        .range([10, 300]);
    
    //draw barchart
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       .attr("x", (d, i) => i * 30)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", (d, i) => {
         console.log(d,scale(d), scale(d)/d);
         return scale(d)
       });

        //add text labels
      svg.selectAll("text")
       .data(dataset)
       .enter()
       .append("text")
       .attr("x", (d, i) => i * 30)
       .attr("y", (d, i) => scale(d) + 15)
       .text((d, i) => d);

    // Add Axis
    const xAxis = d3.axisRight(scale);
    svg.append("g")
      .attr("transform", "translate(" + (w - 50) + ",0)")
      .call(xAxis);

  </script>
</body>

Answer 1

您需要的是对数轴，d3 内置了一个 - https://d3js.org/d3-scale/log

可用性题外话：

有人说它们比线性刻度更难解释，但我们在日常生活中使用的数字是以 10 为底的对数表示，例如4,000 只比 400 多 1 位数，而 400 只比 40 多 1 位数，人们似乎对此很满意;-)

累积图表确实更难阅读 - https://blogs.lse.ac.uk/covid19/2020/05/19/the-public-doesnt-understand-logarithmic-graphs-often-used-to -portray-covid-19/ - 但那是因为人们试图比较具有不同物理尺寸的变化，具体取决于它们在尺度上发生的位置

（当你不需要时使用对数刻度可能很愚蠢）

如何处理D3中数据差异较大的情况

问题描述投票：0回答：1

1个回答

最新问题

如何处理D3中数据差异较大的情况

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1