[英]Javascript/d3 Function for creating new array from an array of arrays
[英]Unable to pass javascript literal from array values to D3 function
我正在尝试将一些数组值传递给 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。
您将字符串文字传递给域而不是值。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.