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

使用d3附加多个svg文本

1 个答案: