我试图将一些数组值传递到d3 scallinear函数。当前函数如下所示:
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>