用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个指标名称（网状，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样式。