Как подключить точки в D3 с линией?

Question

Я вытащил некоторые данные, и после масштабирования я рисую кучу кругов. Это отлично работает.

var gSet = graph1.selectAll("g").data(data).enter().append("g"); 
gSet.append("circle") 
    .attr({ cx: posX, cy: posY, r: dotSize }) 
    .attr("class", "dataPoint"); 

Теперь, я хотел бы соединить точки. Большинство примеров, которые я видел, относятся к барам, а не к линиям, поэтому я искал еще несколько ссылок: line charts и решил использовать элемент пути, например.

var gSet = graph1.selectAll("g").data(data).enter().append("g"); 
gSet.append("circle") 
    .attr({ cx: posX, cy: posY, r: dotSize }) 
    .attr("class", "dataPoint"); 
gSet.append("path") 
    .attr("d", d3.svg.line().x(posX).y(posY)) 
    .attr({ "stroke": "yellow", "stroke-width": "1" }); 

Ничего нового не появляется на экране и из-за незнания, я не уверен, где тыкать, чтобы понять, что пошло не так.

1. Должен ли я использовать пути (или линии, ломаной и т.д. лучший выбор)?
2. Должен ли я работать с атрибутом d или есть более подходящий?
3. Должен ли я применять функцию d3.svg.line() или есть более плавный путь?

Answer 1

я случайно сделать что-то похожее на то, что я думаю, что вы собираетесь, так что я просто вставить его как есть в this jsfiddle, и он покажет вам один из возможных способов подключения вашей линии. Это больше из родительского/дочернего графа, но это просто основано на данных. вы можете удалить родительское свойство и просто связать каждый узел с предыдущим узлом.

, чтобы ответить на ваши вопросы:

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

2. Если вы используете объект пути, свойство d будет описывать форму вашего пути. с D3js люди часто используют d как один из двух необязательных параметров в анонимных методах (с d - данные, а i - счетчик).

3. Вы можете использовать функцию d3.svg.line() для описания формы и положения вашей линии, но если ваши данные так же просты, как кажется, то это может быть излишним - рассмотрите только добавление объектов линии, как показано в моем коде ниже. моя рекомендация состояла бы в том, чтобы идти по пути, если вам нужны «причудливые линии», но это только моя зона комфорта, и есть другие способы.

для моего подхода, код заканчивает тем, как этот

var items = svg.selectAll("g").data(srcData).enter().append("g"); 
items.each(function(d, i){ 
    d3.select(this).attr("transform","translate("+d.posx+","+d.posy+")"); 

    if(d.parentid > 0) 
     d3.select(this).append("line") 
      .attr("x",0) 
      .attr("y",0) 
      .attr("x1",function(d){ return -1*(d.posx - parent(d.parentid).posx); }) 
      .attr("y1",function(d){ return -1*(d.posy - parent(d.parentid).posy); }) 
      .style("stroke",d.color) 
      .style("stroke-width",2); 

    d3.select(this).append("circle") 
     .attr("r",5) 
     .style("fill",d.color); 
});