d3帶標籤的多行

我想在D3中用多行路徑製作時間順序的折線圖。我想將文本標籤應用於這些路徑。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時，在記錄參數時不會在控制檯中輸出任何內容。

有沒有辦法生成多行代碼，這些代碼可以讓我鏈接這些標籤調用？我希望我已經清楚了。

來源

2013-03-11 DeaconDesperado

這聽起來像你想要做的是nested selections。您可能需要稍微重新格式化數據才能執行此操作，但是您應該可以傳入不同行的數組數組，並相應地追加每行。文本標籤以類似的方式工作。

文字標籤不能用於您的原因可能是因爲您沒有設置x和y屬性（或者更確切地說沒有將它們設置爲有效值）。

來源

2013-03-11 18:19:48

d3帶標籤的多行

回答

相關問題