使用d3附加多个svg文本

Question

几天来我一直坚持这个问题.

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

dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]

以下代码将以网格模式显示4个度量标准名称(meshy,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中.我尝试了多种方法,包括用.html替换.text,如下所述:https://github.com/mbostock/d3/wiki/Selections#wiki-html但没有成功.我也尝试添加段落元素 - 这是有效的,但是p元素位于列表中的svg体下方,没有明显的方法将它们移动到正确的位置.上面的代码是我最接近我需要的代码,但由于某种原因,只显示第一个值文本.但是,我对d3中完成任务的任何方法持开放态度:4个度量标准名称,其值正好位于其下方

Answer 1

在第二个代码块中,您只附加一个text元素,因此只显示其中一个元素.你需要做的是附加类似于你的第一个块的文本,即.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.

选项2:

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