用d3附加多个svg文本

我已经被困在这个问题上了几天.

所以我有一个以下形式的对象的数据集：

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样式.