Estoy tratando de pasar algunos valores de matriz a una función d3 scaleLinear. La función actual se ve así:
const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.public + d.private )]) .range([height, 0]); Lo que me gustaría hacer es pasar d.public y d.private desde una matriz que define estos:
const keys = [ "private", "public" ]Para que pueda usarlos (y pasar diferentes claves según los datos) en la función como:
const y = d3.scaleLinear() .domain([0, d3.max(data, d => `d.${keys[0]}` + `d.${keys[1]}` )]) .range([height, 0]);Probé varias variaciones diferentes de la sintaxis anterior sin éxito. TIA.
Está pasando cadena literal al dominio en lugar de valores. d.${keys[0]} se traduce como 'd.private' y no como object.private Use una función o pase d[keys[0]]..Haciendo un ejemplo para usted a continuación con una función (que brinda una mejor flexibilidad en caso de que tenga datos complejos)
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>