svg - 用 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 个度量名称(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 个指标名称，其下方的值

Answer 1

在您的第二个代码块中，您只附加了一个 text元素，因此只有其中一个出现。您需要做的是附加类似于您的第一个 block 的文本，即使用 .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 样式。