d3 несколько строк с метками

Question

Я пытаюсь создать временную диаграмму последовательности в D3 с несколькими линейными дорожками. Я хочу применить текстовые метки к этим путям.

В настоящее время я использую функцию утилиты для создания нескольких элементов d3.svg.line на основе свойств данных (значения plotProps, которые являются ключами от моих данных json).

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'); 

    }); 

Мой подход здесь чувствует себя действительно противоречит здравому смыслу подходу данных присоединиться Д3, в том, что мое поколение линия не совместима если источник данных динамичным. Кажется, я не могу заставить эти ярлыки отображаться правильно. Большинство примеров используют метки, добавленные в элемент g, - следует ли добавить их в путь для моего случая (только текст над каждой строкой)? Передача функций в x, y attrs текстовых элементов, которые я добавляю, ничего не выводит на консоль при регистрации журналов args.

Есть ли способ генерировать несколько строк, которые позволят мне связать эти вызовы с ярлыками? Надеюсь, я был достаточно ясен.

Answer 1

Похоже, что вы хотите сделать это nested selections. Возможно, вам придется немного переформатировать свои данные, чтобы сделать это, но тогда вы должны пройти в массиве массивов для разных строк и соответственно добавить каждую строку. Текстовые надписи работают аналогичным образом.

Причина, по которой текстовые метки не работают для вас, вероятно, потому, что вы не устанавливаете атрибуты x и y (или, скорее, не устанавливаете их в допустимые значения).