d3带标签的多行

Question

我想在D3中用多行路径制作时间顺序的折线图。我想将文本标签应用于这些路径。

我目前正在做的是使用效用函数根据数据的属性（plotProps，它们是我的json数据中的键值）制作几个d3.svg.line元素。这里

function makeLine(prop){ 
     return d3.svg.line() 
      .x(function(d){ return x(d.date); }) 
      .y(function(d){ return y(d[prop]); }); 

    } 

var plotProps = ['registered','subscribers','total','anonymous']; 

plotProps.forEach(function(prop){ 
     line = makeLine(prop); 
     svg.append("path") 
      .datum(graph_data) 
      .attr("class", "line datapath") 
      .attr("d", line) 
      .attr('prop',prop) 
      .style('text-anchor','middle'); 

     svg.append('svg:text') 
     .attr('class','label') 
     .attr("y", "") 
     .attr("x", "") 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text('foobar'); 

    }); 

我的做法感觉真的违反直觉D3的数据连接方式，在我行代不兼容应该数据源是动态的。我似乎无法让标签正常显示。大多数示例使用添加到g元素的标签 - 我应该将它们添加到我的案例的路径（每行上面的文本）？将函数传递给我添加的文本元素的x，y attrs时，在记录参数时不会在控制台中输出任何内容。

有没有办法生成多行代码，这些代码可以让我链接这些标签调用？我希望我已经清楚了。

Answer 1

这听起来像你想要做的是nested selections。您可能需要稍微重新格式化数据才能执行此操作，但是您应该可以传入不同行的数组数组，并相应地追加每行。文本标签以类似的方式工作。

文字标签不能用于您的原因可能是因为您没有设置x和y属性（或者更确切地说没有将它们设置为有效值）。