D3.js 将行名附加到它答案

【问题标题】：D3.js Appending line name to itD3.js 将行名附加到它
【发布时间】：2021-10-04 17:20:28
【问题描述】：

我有这个图表：符号名称，'$TSLA' 和 '$AAPL' 没有附加到该行，它们只是用适当的 x 和 y 值放置在那里。我想将它们附加到该行，这样如果该行在不同的位置结束，符号名称就会出现在它旁边。比如this example。

代码如下：

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

感谢您的帮助。如果您需要所有代码，我可以粘贴。

【问题讨论】：

请将整个代码放在jsfiddle或codepen中。这将更容易更新和提供有效的解决方案。

标签： javascript d3.js

【解决方案1】：

这是我用来添加标签的代码。第一部分（knames）也是我用来绘制线条的部分。（可能有更简单的方法）：

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

【讨论】：