Tengo este gráfico: los nombres de los símbolos, '$TSLA' y '$AAPL' no se agregan a la línea, simplemente se colocan allí con los valores x e y apropiados. Me gustaría agregarlos a la línea, de modo que si la línea terminara en una posición diferente, el nombre del símbolo aparecería junto a ella. Como en este ejemplo .
Aquí está el código:
var svg = d3.select('#graph') .append('svg') .attr('width', w) .attr('height', h); svg.append('path') .datum(data) .attr('class', 'stock') .attr('stroke', '#157145') .... //I have included the above code because it is what's different from the link- //my lines are appended to the variable 'svg'. I am, however, selecting the correct class //in the below code: .... var sec = d3.selectAll(".stock") .data(kvals) //this data follows the same pattern as the examples' .enter().append("g") .attr("class", "stock"); sec.append("text") .datum(function(d){ return { name: d.name, value: d.values[d.values.length-1] }; }) .attr("transform", function(d){ console.log(xScale(d.value.date)); //not displayed in console. return "translate(" + xScale(d.value.date) + "," + yScale(d.value.stock) +")" }) .attr("x", 3) .attr("dy", ".35em") .text(function(d){ return d.name; });Gracias por tu ayuda. Si necesitas todo el código, puedo pegarlo.
Aquí está el código que usé para agregar las etiquetas. La primera parte (knames) es lo que usé para trazar la línea también. (podría haber una manera más fácil de hacer esto):
var knames = d3.scaleOrdinal(); knames.domain(Object.keys(data[0]).filter(function(key){ //only get non-sma values return !key.match(/([_])|(d)|(band)\w+/g) })); var kvals = knames.domain().map(function(name){ return { name: name, values: data.map(function(d){ return { date: d.date, stock: d[name] }; }) }; }); var sec = svg.selectAll("stock") .data(kvals) .enter().append("g") .attr("class", "stock"); sec.append("text") .datum(function(d){ return { name: d.name, value: d.values[d.values.length-1] }; }) .attr("transform", function(d){ return "translate(" + xScale(d.value.date) + "," + yScale(d.value.stock) +")" }) .attr("x", 7) .attr("dy", ".3em") .style("fill", function(d) { return accent(d.name); }) .style('font-family', 'Helvetica') .style('font-size', '11px') .style('letter-spacing', '1px') .style('text-transform', 'uppercase') .text(function(d){ return d.name; });