使用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");

但这仅返回第一个度量标准下方的值，其他三个值文本甚至不在DOM中。 我尝试了多种方法，包括将 .text 替换为如此描述的 .html：https://github.com/mbostock/d3/wiki/Selections#wiki-html，但并没有成功。 我还尝试添加段落元素 - 这样做可以，但是 p 元素位于 svg 主体以下的列表中，没有明显的方法将它们移动到正确的位置。 上面的代码是我最接近得到所需内容的方式，但由于某种原因，只有第一个值文本显示出来。 然而，我对使用 d3 完成工作的任何方法都持开放态度：4个计量名称及其下方的值。

- user1452494

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

- Lars Kotthoff