如何在D3中靜態定位元素

Question

我目前有一個線形圖，看起來像這樣：

在jsfiddle上http://jsfiddle.net/vertaire/kttndjgc/1/

我一直在嘗試將值手動定位在圖形上，以便將它們打印在圖例旁邊，如下所示：

• 意外傷害：1980，388437

我試圖手動設置位置，但是當我嘗試調整位置時，該位置相對於直線上的圓的位置是相對的，如下所示：

如何設置坐標，使值顯示在圖例旁邊？

這是用於打印值的代碼片段：

    var mouseCircle = causation.append("g") // for each line, add group to hold text and circle
      .attr("class","mouseCircle"); 

mouseCircle.append("circle") // add a circle to follow along path
  .attr("r", 7)
  .style("stroke", function(d) { console.log(d); return color(d.key); })
  .style("fill", function(d) { console.log(d); return color(d.key); })
  .style("stroke-width", "1px"); 

mouseCircle.append("text")
  .attr("transform", "translate(10,3)"); // text to hold coordinates

.on('mousemove', function() { // mouse moving over canvas
      if(!frozen) {
      d3.select(".mouseLine")
      .attr("d", function(){
          yRange = y.range(); // range of y axis
          var xCoor = d3.mouse(this)[0]; // mouse position in x
          var xDate = x.invert(xCoor); // date corresponding to mouse x 
          d3.selectAll('.mouseCircle') // for each circle group
              .each(function(d,i){
                 var rightIdx = bisect(data[1].values, xDate); // find date in data that right off mouse
                 yVal = data[i].values[rightIdx-1].VALUE;
                 yCoor = y(yVal); 
                 var interSect = get_line_intersection(xCoor,  // get the intersection of our vertical line and the data line
                      yRange[0], 
                      xCoor, 
                      yRange[1],
                      x(data[i].values[rightIdx-1].YEAR),
                      y(data[i].values[rightIdx-1].VALUE),
                      x(data[i].values[rightIdx].YEAR),
                      y(data[i].values[rightIdx].VALUE));

              d3.select(this) // move the circle to intersection
                  .attr('transform', 'translate(' + interSect.x + ',' + interSect.y + ')');

              d3.select(this.children[1]) // write coordinates out
                  .text(xDate.getFullYear() + "," + yVal);
                  yearCurrent = xDate.getFullYear();
                  console.log(yearCurrent)
                  return yearCurrent;

              });

          return "M"+ xCoor +"," + yRange[0] + "L" + xCoor + "," + yRange[1]; // position vertical line
      });
      }
  });

Answer 1

我要做的第一件事是動態創建圖例，而不是對每個項目進行硬編碼：

var legEnter = chart1.append("g")
      .attr("class","legend")
      .selectAll('.legendItem')
      .data(data)
      .enter();

  legEnter.append("text")
      .attr("class","legendItem")
      .attr("x",750)
      .attr("y", function(d,i){
        return 6 + (20 * i);  
      })
      .text(function(d){
          return d.key;
      }); 

  legEnter.append("circle")
      .attr("cx",740)
      .attr("cy", function(d,i){
        return 4 + (20 * i);  
      })
      .attr("r", 7)
      .attr("fill", function(d,i){
        return color(d.key); 
      });

即使保留原樣，此處的關鍵還是為每個text分配一個legendItem類。 然后在鼠標懸停時，找到它並更新它的值：

d3.select(d3.selectAll(".legendItem")[0][i])   // find it by index               
  .text(function(d,i){
    return d.key + ": " + xDate.getFullYear() + "," + yVal;
  });

更新小提琴 。