無法將 javascript 文字從數組值傳遞給 D3 函數

Question

我正在嘗試將一些數組值傳遞給 d3 scaleLinear 函數。 當前函數如下所示：

const y = d3.scaleLinear()
        .domain([0, d3.max(data, d =>
          d.public +
          d.private
        )])
        .range([height, 0]);

我想做的是從定義這些的數組中傳遞d.public和d.private ：

const keys = [
      "private",
      "public"
    ]

這樣我就可以在函數中使用它們（並根據數據傳遞不同的鍵）：

const y = d3.scaleLinear()
        .domain([0, d3.max(data, d =>
          `d.${keys[0]}` +
          `d.${keys[1]}`
        )])
        .range([height, 0]);

我在上面的語法上嘗試了幾種不同的變體，但都沒有成功。 TIA。

Answer 1

您將字符串文字傳遞給域而不是值。 d.${keys[0]}轉換為 'd.private' 而不是 object.private 使用函數或傳遞 d[keys[0]]..在下面用函數為您做一個示例（這提供了更好的靈活性如果您有復雜的數據）

 let data = [{ "private": 10, "public": 20 }, { "private": 40, "public": 30 }, { "private": 20, "public": 60 }] const keys = ["private", "public"]; let valueOf = (d, key) => d[key]; const x = d3.scaleLinear() .domain([0, d3.max(data, d => valueOf(d, keys[0]) + valueOf(d, keys[1]) )]) .range([0, 300]); let points = [0, 12, 45, 34, 77.72, 59.11, 9.99]; d3.select('svg .scal') .selectAll('circle') .data(points) .enter() .append('circle') .attr('r', 3) .attr('fill', "green") .attr('cx', function(d) { return x(d); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <body> <svg width="400" height="40"> <g class="scal" transform="translate(40, 30)"></g></svg> </body>

無法將 javascript 文字從數組值傳遞給 D3 函數

問題描述

1 個解決方案

解決方案1
0 2022-06-11 04:39:17

無法將 javascript 文字從數組值傳遞給 D3 函數

問題描述

1 個解決方案

解決方案1 0 2022-06-11 04:39:17

解決方案1
0 2022-06-11 04:39:17