Question

我正在尝试根据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; });
      });
}

这会产生如下情况： http://imgur.com/hFTItGp

有什么想法吗？我非常感谢你的帮助。谢谢！

Answer 1

问题的根本原因在于代码

{name: d.name, value: d.values[d.values.length - 1]}

您假设values按日期排序，最后日期排序。在您的数据中，情况恰恰相反 - 最新日期是第一个。因此，您的文本显示在x轴的开头。要修复，只需对数据进行排序。

我已经解决了这个以及其他一些问题here。

d3文本遍布整个地方而不是正确的地方

1 个答案: