react d3 地图 marks（Slider) 根据年份显示节点

https://ant.design/components/slider-cn

如果显示20年，就是每一年都显示一个标记点，但是现在需要超过50年，那么需要做判断，超过20年，就5年显示一个标记点：

<span style="color:#dcc6e0">const</span> marks = {};
<span style="color:#dcc6e0">if</span> (<span style="color:#f5ab35">Object</span>.keys(updatedYearlyData).length &gt; <span style="color:#f5ab35">20</span>) {
<span style="color:#f5ab35">Object</span>.keys(updatedYearlyData).forEach(<span style="color:#f5ab35">year</span> =&gt; {
<span style="color:#dcc6e0">if</span> (<span style="color:#f5ab35">parseInt</span>(year) &gt; <span style="color:#f5ab35">20</span> &amp;&amp; <span style="color:#f5ab35">parseInt</span>(year) % <span style="color:#f5ab35">5</span> === <span style="color:#f5ab35">0</span>) {
marks[year] = <span style="color:#abe338">`</span><span style="color:#abe338">${year}</span><span style="color:#abe338">年`</span>;
}
});
} <span style="color:#dcc6e0">else</span> {
<span style="color:#d4d0ab">// 使用原来的 marks 逻辑</span>
<span style="color:#f5ab35">Object</span>.keys(updatedYearlyData).forEach(<span style="color:#f5ab35">year</span> =&gt; {
marks[year] = <span style="color:#abe338">`</span><span style="color:#abe338">${year}</span><span style="color:#abe338">年`</span>;
});
}

同时修改slider:

(使用

marks

属性标注分段式滑块，使用

value

/

defaultValue

指定滑块位置。当

included=false

时，表明不同标记间为并列关系。当

step=null

时，Slider 的可选值仅有

marks

标出来的部分。)

<Slider  min={firstYear} max={lastYear} marks={marks} onChange={handleSliderChange} defaultValue={firstYear} tooltipVisible tipFormatter={(value) => `${value}年`} />