使用D3.js访问同一追加实例中嵌套对象的不同级别的值

Question

在同一个追加实例中使用来自两个不同嵌套级别的值的最佳方法是什么?

这是我的数据:

data = [   
{"key":"comp1","values":[
{"id": 0,"x":10,"y": 20},
{"id": 1,"x":20,"y": 10},
{"id": 2,"x":30,"y": 70},
{"id": 3,"x":40,"y": 80}  
]},    
{"key":"comp2","values":[
{"id": 0,"x":10,"y": 80},
{"id": 1,"x":20,"y": 60},
{"id": 2,"x":30,"y": 10},
{"id": 3,"x":40,"y": 40}   
]} 
]

我想将键显示为文本，但使用最后一项(id:3)的x和y值。

这是我到目前为止的想法:

.append("text")
.data(data)   
.text(function(d) { return d.key; }) // so far so good
.data(d.values) // trying to get one level in the nest
.attr("x", 100 )
.attr("y", function(d) { return yScale(d.y) })
.attr("dy", ".35em")

有什么建议可以帮助我思考吗?

Answer 1

可以使用d.values，因为它是绑定数据的一部分

与你的例子:

.append("text")
.data(data)
.text(function(d) { return d.key; }) // so far so good
.attr("x", function(d) { return d.values[d.values.length - 1].x; })
.attr("y", function(d) { return yScale(d.values[d.values.length - 1].y); })
.attr("dy", ".35em");

const svg = d3.select('svg');
const data = [   
{"key":"comp1","values":[
{"id": 0,"x":10,"y": 20},
{"id": 1,"x":20,"y": 10},
{"id": 2,"x":30,"y": 70},
{"id": 3,"x":40,"y": 80}  
]},    
{"key":"comp2","values":[
{"id": 0,"x":10,"y": 80},
{"id": 1,"x":20,"y": 60},
{"id": 2,"x":30,"y": 10},
{"id": 3,"x":40,"y": 40}   
]} 
];
const yScale = d3.scaleLinear().domain([0, 100]).range([20, 300]);
svg.selectAll('text')
.data(data)   
.enter()
.append("text")
.text(function(d) { return d.key; }) // so far so good
.attr("x", function(d) { return d.values[d.values.length - 1].x; })
.attr("y", function(d) { return yScale(d.values[d.values.length - 1].y); })
.attr("dy", ".35em");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="background-color: #eee; width: 100%; height: 300px;"></svg>