Question

如果这似乎是重复，我道歉。我已经看过很多类似的线程，但似乎都没有解决我遇到的确切问题。

我需要为类创建一个多系列折线图。我不熟悉javascript，对D3来说是全新的，所以我尽我所能来完成这项工作。我从这个例子开始：http://bl.ocks.org/mbostock/3884955

我将代码复制到编辑器中，我真正做到的就是将时间刻度的格式更改为四位数年份（这似乎有效），重命名变量＆＃34; city＆＃34;和＃34;城市＆＃34;到＆＃34;类别＆＃34;和＆＃34;类别＆＃34;，并将温度轴重新标记为＆＃34;百分比＆＃34;。

这是我的代码：

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

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//Change date format to four digit year.
var parseDate = d3.time.format("%Y").parse;
//x and y axes
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()
//change from "basis" to "linear"
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    //changed d.temperature to d.percent
    .y(function(d) { return y(d.percent); });

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.tsv("data.tsv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });
//changied variable "cities" to "categories"
  var categories = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
      //changed below to percent
        return {date: d.date, percent: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));
//changed "cities" to "categories"
  y.domain([
  //Temp to percent
    d3.min(categories, function(c) { return d3.min(c.values, function(v) { return v.percent; }); }),
    d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.percent; }); })
  ]);

  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")
      //Changed Temperature to percent for label
      .text("Percent (%)");
    //Changed "city" to "category" and "cities" to "categories"
  var category = svg.selectAll(".category")
      .data(categories)
    .enter().append("g")
      .attr("class", "category");

  category.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  category.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.percent) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

</script>

我知道这很多 - 几乎所有事情。我不知道问题出在哪里。如果有人愿意看这个，我会非常感激。这是指向我当前图表托管位置的链接：http://www.pitt.edu/~kac232/hmwrk1ptA_test.html

目前，正在发生的事情是，我错过了一个类别的线路，而且我的路径非常直，对我来说没有任何意义。我希望他们至少会错开一点点。

谢谢！

Answer 1

你会踢自己，但错误在你的数据标题中。您重复了标题Bachelor's degree or more。更改其中一个名称，它将按预期工作。

D3多系列线图缺少第3行

1 个答案: