D3文本到处都是，不在正确的地方

我试图建立一个线形图基于在http://bl.ocks.org/mbostock/3884955的例子。我不使用温度，而是使用0-1之间的值级别，我称之为情感。

我也不使用tsv文件，而是通过AJAX调用实时渲染JSON，其中我的数据对象是一个包含对象的数组:

[{date: '20140716', ESPN.com: 0.4, SI.com: 0.5})]

数组中通常有多个日期和至少6-7个网站(它们包含在每个对象中)。

代码如下:

function renderHistoricalData(array) {

var data = array;
  var margin = {top: 20, right: 80, bottom: 30, left: 50},
  width = 1200 - margin.left - margin.right,
  height = 450 - 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.category10();
  var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
  var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");
  var line = d3.svg.line()
  .interpolate("basis")
  .defined(function(d) { return d.y!=0; })
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.sentiment); });
  var svg = d3.select("#historical_chart").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 + ")");
  data.forEach(function(d) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
    d.date = parseDate(d.date);
    var sites = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, sentiment: +d[name]};
        })
      };
    });
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([
      d3.min(sites, function(c) { return d3.min(c.values, function(v) { return v.sentiment; }); }),
      d3.max(sites, function(c) { return d3.max(c.values, function(v) { return v.sentiment; }); })
      ]);
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Sentiment (%)");
    var site = svg.selectAll(".site")
    .data(sites)
    .enter().append("g")
    .attr("class", "site");
    site.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });
    site.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.date) + "," + y(d.value.sentiment) + ")"; })
    .attr("x", 3)
    .attr("dy", ".35em")
        // .style("text-anchor", "inherit")
        .text(function(d) { return d.name; });
      });
}

结果如下所示:https://i.stack.imgur.com/dgErb.jpg

任何想法?非常感谢你的帮助。谢谢!