ScaleOrdinal沒有正確鏈接顏色

我打開這個帖子是因為我開始學習 D3js，但是我在我的網站上使用 scaleOrdinal 函式時遇到了問題。正如您從下面的螢屏截圖中看到的那樣，數字沒有正確鏈接到我想要顯示的顏色（即最高的數字具有第二亮的顏色）。

我檢查了很多次 HTML 和 JS 代碼，一切似乎都是正確的：

HTML

<div class="row justify-content-center flex-wrap">
        <div class="col col-lg-9 tablebox mb-4">
            <table id="postings-table">
                <th>Postings rank</th>
                <th>User name</th>
                <th>User code</th>
                <th>Grade</th>
                <th>Documents loaded</th>
                <th>Postings loaded</th>
                <% for (let row of firstResults) {%> 
                    <tr>
                        <td><%= row.postings_rank %></td>
                        <td><%= row.fullname.slice(0,26) %></td>
                        <td><a href="<%=`/postings?glcode=&description=&startregdate=&endregdate=&starteffdate=&endeffdate=&costcenter=&docnum=&usercode=${row.user_code}&acccenter=&ordernum=&paymode=&supplcode=&countrycode=&fs_pos=`%>"><%= row.user_code %></a></td>
                        <td><%= row.grade_description.slice(0,21) %></td>
                        <td><%= Number(row.doc_count).toLocaleString("it-IT", {maximumFractionDigits:0}) %></td>
                        <td><%= Number(row.postings_count).toLocaleString("it-IT", {maximumFractionDigits:0}) %></td>
                    </tr>
                <% } %> 
            </table>
        </div>
    </div>

JS

const color_scale = d3.scaleOrdinal().range(['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac']).domain(d3.extent(firstResults, d => d.postings_count));

 d3.selectAll("#postings-table td:last-of-type")
     .data(firstResults).style("background-color", (d, i, n) => color_scale(d.postings_count));

你能告訴我我在做什么錯嗎？我真的不知道為什么顏色沒有正確鏈接。

uj5u.com熱心網友回復：

您看到的行為是預期的，您正在對非序數資料使用序數比例。

d3.extent 回傳陣列的最小值和最大值——但序數尺度的域（因為它用于序數資料）需要定義域的每個值。如果將域外的值傳遞給比例尺，則會為其分配范圍內下一個未分配的值。

如果將每個可擴展值傳遞給域并對這些值進行排序，則可以保持序數比例。

 d3.scaleOrdinal()
   .range(['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'])
   .domain(firstResults
        .map(d => d.postings_count)
        .sort((a, b) => a - b)
    );

如果域中的值多于范圍，則范圍中的某些顏色將被重用。

但使用順序比例可能更好：

順序尺度，如發散尺度，與連續尺度相似，因為它們將連續的數字輸入域映射到連續輸出范圍。

Show code snippet

let scale = d3.scaleSequential(d3.interpolateGnBu)
  .domain([0,20]);
  
let svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  

svg.selectAll(null)
  .data(d3.range(20).map(d=>Math.random()*20))
  .enter()
  .append('rect')
  .attr('x', (d,i)=> i*20)
  .attr('y', 10)
  .attr('width',18)
  .attr('height',18)
  .attr('fill', d=>scale(d));

svg.selectAll(null)
  .data(d3.range(20))
  .enter()
  .append('rect')
  .attr('x', (d,i)=> i*20)
  .attr('y', 30)
  .attr('width',18)
  .attr('height',18)
  .attr('fill', d=>scale(d));
  
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

第一行是隨機資料，第二行顯示插值

您可以創建自定義顏色插值器來調整您想要的顏色。

或者，您可以使用線性/連續比例并提供您在序數比例域中使用的相同顏色值，您可以使用值的范圍進行計算。

上述兩個選項不提供任何給定輸入的離散顏色選項。但是，您可以使用閾值比例為任何給定輸入提供離散顏色，為此您需要一個線性比例：

Show code snippet

let scale = d3.scaleThreshold()
  .range(['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'])
  .domain([4,8,12,16]);
  
let svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  

svg.selectAll(null)
  .data(d3.range(20).map(d=>Math.random()*20))
  .enter()
  .append('rect')
  .attr('x', (d,i)=> i*20)
  .attr('y', 10)
  .attr('width',18)
  .attr('height',18)
  .attr('fill', d=>scale(d));

svg.selectAll(null)
  .data(d3.range(20))
  .enter()
  .append('rect')
  .attr('x', (d,i)=> i*20)
  .attr('y', 30)
  .attr('width',18)
  .attr('height',18)
  .attr('fill', d=>scale(d));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

如上，第一行是隨機資料，第二行顯示插值

閾值比例在域陣列中比范圍少一項 - 如檔案中所述。

標籤：javascriptd3.js

上一篇：D3出現錯誤

下一篇：如何過濾位于另一個陣列內的陣列的第n個元素？