在线系列开始时添加标志

Question

我试图在行系列的开头添加一个标志。 例如，我想在蓝线系列的开头添加美国徽标，在红线开始的位置添加San Fransico徽标。

对于蓝线： 图片来源（https://www.google.com/url?sa=i&source=imgres&cd=&cad=rja&uact=8&ved=2ahUKEwjG37v0xM3gAhVym-AKHX8yCwEQjRx6BAgBEAU&url=https%3A%2F%2Fwww.flagsoncars.com%2Famericanflagretrodecalsm.html&psig=AOvVaw31XEm2O9r7bQATtA4lbVbn&ust=1550862968492776）

红线： 图片来源（https://www.proflagsandbanners.com/images_products/san_francisco_49ers_large_3x5_flag_68308sma.jpg）

您认为这可能吗？我试图将其添加为文本，但不能分离美国和科幻小说。

var margin = {
            top: 50,
            right: 50,
            bottom: 30,
            left: 80
          },
          width = 830 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;
    
        var parseDate = d3.time.format("%Y-%m-%d").parse;
    
        var x = d3.time.scale()
          .range([0, width]);
    
        var y = d3.scale.linear()
          .range([height, 0]);
    
        var color = d3.scale.ordinal().range(['#002868','#BF0A30',]);
    
    
    
        var xAxis = d3.svg.axis()
          .scale(x)
          .ticks(10)
          .innerTickSize(2)
          .outerTickSize(0)
          .orient("bottom");
    
        var yAxis = d3.svg.axis()
          .scale(y)
          .tickFormat(function(d) {
            return d;
          })
          .ticks(10)
          .innerTickSize(2.5)
          .outerTickSize(0)
          .orient("left");
    
    //    var yScale = d3.scale.linear()
     //   .range([height, 0]);
    
        
        
        var line = d3.svg.line()
          .interpolate("basis")
          .x(function(d) {
            return x(d.date);
          })
          .y(function(d) {
            return y(d.price);
          });
    
        var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
        d3.csv("https://gist.githubusercontent.com/vaibhavjaitly/f1339c2bc02857afdf65b8d572dc31e5/raw/91b3283fe648a4d86c4ab322ad602188c047485c/gistfile1.csv", function(error, data) {
          color.domain(d3.keys(data[0]).filter(function(key) {
            return key !== "Year";
          }));
    
          var cities = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {
                  date: d.Year,
                  temperature: +d[name]
                };
              })
            };
          });
    
          data.forEach(function(d) {
            d.date = parseDate(d.Year);
          });
    
          var companies = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {
                  date: d.date,
                  price: +d[name]
                };
              })
            };
          });
    
          x.domain(d3.extent(data, function(d) {
            return d.date;
          }));
    
          y.domain([
            d3.min(companies, function(c) {
              return d3.min(c.values, function(v) {
                return v.price;
              });
            }),
            d3.max(companies, function(c) {
              return d3.max(c.values, function(v) {
                return v.price;
              });
            })
          ]);
    
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
    
       //   svg.append("g")
       //    .attr("class", "y axis")
       //    .call(yAxis)
        
          svg.append("line")
            .attr({
              "class": "horizontalGrid",
              "x1": 33,
              "x2": width,
              "y1": y(0),
              "y2": y(0),
              "fill": "none",
              "shape-rendering": "crispEdges",
              "stroke": "black",
              "stroke-width": "1px",
              "stroke-dasharray": ("3, 3")
            });
    
    
          var company = svg.selectAll(".company")
            .data(companies)
            .enter().append("g")
            .attr("class", "company");
    
          var path = svg.selectAll(".company").append("path")
            .attr("class", "line")
            .attr("d", function(d) {
              return line(d.values);
            })
            .style("stroke", function(d) {
              return color(d.name)
            });
    
          var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];
    
          d3.select(path[0][0])
            .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0])
            .attr("stroke-dashoffset", totalLength[0])
            .transition()
            .duration(8000)
            .ease("linear")
            .attr("stroke-dashoffset", 0);
    
          d3.select(path[0][1])
            .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1])
            .attr("stroke-dashoffset", totalLength[1])
            .transition()
            .duration(8000)
            .ease("linear")
            .attr("stroke-dashoffset", 0);
    
          var city = svg.selectAll(".city")
          .data(cities)
          .enter().append("g")
          .attr("class", "city");
    
        city.append("path")
          .attr("class", "line")
          .attr("d", function(d) {
            return line(d.values);
          })
          .style("stroke", function(d) {
            return color(d.name);
          });
    
        city.append("text")
          .datum(function(d) {
            return {
              name: d.name,
              value: d.values[d.values.length - 1]
            };
          })
          
            .attr("transform", function(d) {
            return "translate(" + x(d.value.Year) + "," + y(d.value.temperature) + ")";
          })
          .attr("x", 0)
          .attr("dy", "5.75em")
          .text(function(d) {
            return d.name;
          });
    
          
         
          
          
          var mouseG = svg.append("g")
            .attr("class", "mouse-over-effects");
    
          mouseG.append("path") // this is the black vertical line to follow mouse
            .attr("class", "mouse-line")
            .style("stroke", "black")
            .style("stroke-width", "1px")
            .style("opacity", "0");
    
          var lines = document.getElementsByClassName('line');
    
          var mousePerLine = mouseG.selectAll('.mouse-per-line')
            .data(cities)
            .enter()
            .append("g")
            .attr("class", "mouse-per-line");
    
          mousePerLine.append("circle")
            .attr("r", 7)
            .style("stroke", function(d) {
              return color(d.Year);
            })
            .style("fill", "none")
            .style("stroke-width", "1px")
            .style("opacity", "0");
    
          mousePerLine.append("text")
            .attr("transform", "translate(10,3)");
    
          mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
            .attr('width', width) // can't catch mouse events on a g element
            .attr('height', height)
            .attr('fill', 'none')
            .attr('pointer-events', 'all')
            .on('mouseout', function() { // on mouse out hide line, circles and text
              d3.select(".mouse-line")
                .style("opacity", "0");
              d3.selectAll(".mouse-per-line circle")
                .style("opacity", "0");
              d3.selectAll(".mouse-per-line text")
                .style("opacity", "0");
            })
            .on('mouseover', function() { // on mouse in show line, circles and text
              d3.select(".mouse-line")
                .style("opacity", "1");
              d3.selectAll(".mouse-per-line circle")
                .style("opacity", "1");
              d3.selectAll(".mouse-per-line text")
                .style("opacity", "1");
            })
            .on('mousemove', function() { // mouse moving over canvas
              var mouse = d3.mouse(this);
              d3.select(".mouse-line")
                .attr("d", function() {
                  var d = "M" + mouse[0] + "," + height;
                  d += " " + mouse[0] + "," + 0;
                  return d;
                });
    
              d3.selectAll(".mouse-per-line")
                .attr("transform", function(d, i) {
                  var xYear = x.invert(mouse[0]),
                    bisect = d3.bisector(function(d) {
                      return d.Year;
                    }).right;
                  idx = bisect(d.values, xYear);
    
                  var beginning = 0,
                    end = lines[i].getTotalLength(),
                    target = null;
    
                  while (true) {
                    target = Math.floor((beginning + end) / 2);
                    pos = lines[i].getPointAtLength(target);
                    if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                      break;
                    }
                    if (pos.x > mouse[0]) end = target;
                    else if (pos.x < mouse[0]) beginning = target;
                    else break; //position found
                  }
    
                  d3.select(this).select('text')
                    .text(y.invert(pos.y).toFixed(2));
    
                  return "translate(" + mouse[0] + "," + pos.y + ")";
                });
            });
        });

body {
  font: 12px Helvetica;
}
.axis line {
  fill: red;
  stroke: #2b2b2b;
  shape-rendering: crispEdges;
}
.x.axis path {
  display: none;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 3px;
}

<script src="https://d3js.org/d3.v3.js"></script>