如何在需要 D3.js 中的对象的 d3.Threshold.range() 中使用 select 选项值（字符串）？

Question

使用 d3.js 我得到一个 select 框的值并将它传递给 .scaleThreshold() 的 .range()。

这是 select 框：

<select id="color_scheme">
  <option value="d3.schemeOranges[7]">Orange</option>
<select>

这就是我获取 select 框值的方式：

var color_scheme = d3.select("#color_scheme").property("value");

这是色阶：

    const colorScale = d3.scaleThreshold()
        .domain([10, 100, 1000, 10000, 100000, 1000000])
        .range(color_scheme);

问题是在这种情况下 color_scheme 是一个字符串，它在 .range() 括号内不起作用。

如果你 console.log 它你只是收到字符串 d3.schemeOranges[7] 回来。

但是，当您将 var color_scheme 直接硬编码为 color_scheme = d3.schemeOranges[7] 时，它会起作用。

如果你 console.log 它你会收到预期的正确对象：

[
    "#fff5eb",
    "#fee6ce",
    "#fdd0a2",
    "#fdae6b",
    "#fd8d3c",
    "#f16913",
    "#d94801",
    "#a63603",
    "#7f2704"
]

所以问题是：我们如何让 select 值在 .range() 中正常工作？

Answer 1

我建议如下。将您的输入更改为：

<select id="color_scheme">
  <option value="schemeOranges">Orange</option>
<select>

然后在你的js中，使用字符串，数组是：

d3[color_scheme][7]

How to use select option value (string) inside a d3.Threshold.range() that needs an object in D3.js?