我已经被这个问题困扰了好几天了。
所以我有一个以下形式的对象数据集:
dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]
以下代码将以网格模式显示 4 个度量名称(mesh、meshx 是网格的坐标点,meshsize 是网格的大小,所以这只是将文本放在网格正方形的中间):
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d.metric;
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
现在我想将指标的值放在指标名称的正下方,如下所示:
svg.append("text")
.data(dataset)
.text(function(d){
return (d.value);
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2 + 20;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2 ;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
但这仅返回 FIRST 指标的指标名称下方的值,其他 3 个值文本甚至不在 DOM 中。我尝试了多种方法,包括将 .text 替换为 .html ,如下所述:https ://github.com/mbostock/d3/wiki/Selections#wiki-html没有成功。我也尝试过附加段落元素 - 这可行,但 p 元素位于列表中 svg 主体的下方,没有明显的方法可以将它们移动到正确的位置。上面的代码是我得到的最接近我需要的代码,但由于某种原因,只显示了第一个值文本。但是,我对 d3 中完成工作的任何方法持开放态度:4 个指标名称,其下方的值