我已经被困在这个问题上了几天.
所以我有一个以下形式的对象的数据集：
dataset = [{metric:"revenue",value:0.03},{metric:"sales",value:0.15},{metric:"churn",value: 0.06},{metric:"logins",value: 0.45}]
以下代码将在网格图案中显示4个度量名称(网格,网格是网格的坐标点,网格尺寸是网格的大小,因此这只是将文本放在网格正方形中)：
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",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",i){
return meshy[i] + meshsize/2 + 20;
})
.attr("x",i){
return meshx[i] + meshsize/2 ;
})
.attr("font-size","bold");
但是,这只返回FIRST度量的度量名称下面的值,其他3个值文本在DOM中不均匀.我尝试了多种方法,包括用.html替换.text,如下所述：https://github.com/mbostock/d3/wiki/Selections#wiki-html没有成功.我也尝试附加段落元素 – 这是有效的,但p元素位于列表中的svg正文之下,没有明显的方法将它们移动到正确的位置.上面的代码是我最接近我需要的代码,但由于某些原因,只有第一个值文本显示.然而,我对d3中的任何方法都可以接受完成的工作：4个度量名称,其值在正下方
解决方法
在您的第二个代码块中,您只需添加一个文本元素,因此只有其中一个文本元素出现.您需要做的是将文本附加到您的第一个块,即.enter()选择.为此,您有两个选择.您可以保存并重新使用.enter()选择,也可以为两种文本分配不同的类,以便区分它们.
选项1：
var texts = svg.selectAll("text")
.data(dataset)
.enter();
texts.append("text")
.text(function(d){
return d.metric;
})
// set position etc.
texts.append("text")
.text(function(d){
return d.value;
})
// set position etc.
选项二：
svg.selectAll("text.title")
.data(dataset)
.enter()
.append("text")
.attr("class","title")
.text(function(d){
return d.metric;
})
// set position etc.
svg.selectAll("text.value")
.data(dataset)
.enter()
.append("text")
.attr("class","value")
.text(function(d){
return d.value;
})
// set position etc.
第一个选项显然较短,但是根据您还想做什么,第二个选项可能更为可取 – 如果要稍后修改文本,如果您可以区分两种文本,将会更容易.您也可以使用不同的类来提供不同的CSS样式.
