需要帮助从数组制作折线图，我想要自定义刻度标签

Question

我计划从用户那里获得投票并在折线图中显示最近三个月的结果。在接下来的几个月里，他们将点击 "good" 或 "bad" 按钮。这是一些数据，我将尝试使其看起来像来自服务器的数据。

    var results = {
        "month1" : {"good" : 400,"bad" : 30} ,
        "month2" : {"good" : 200, "bad" : 100},
        "month3" : {"good" : 100, "bad" : 200}

    };

我想我会得到一个像 [370, 100, -100] 这样的数组，从坏中减去好的。我想这些将是该线将经过的图表上的点。所以在“1 个月”（在 x 轴上）该线将经过 370，在“2 个月”该线将经过 100，在“3 个月”该线将经过 -100。

我猜 y 轴应该从 -100 缩放到 370
x 轴上应该有三个刻度 tickLabels = ["1 mo", "2 mo", "3 mo"]

这是我到目前为止所拥有的，我知道这不是很多，因为我很困惑。

var results = {
        "month1" : {"good" : 400,"bad" : 30} ,
        "month2" : {"good" : 200, "bad" : 100},
        "month3" : {"good" : 100, "bad" : 200}

    };

    var arr = []

    for(var key in results){
        var obj = results[key];
        arr.push(obj.good - obj.bad)
    }
    console.log(arr)

    var margin = {top : 30, right : 20, bottom : 30, left: 50},
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

    var x = d3.scale.linear().range([0, width])
    var y = d3.scale.linear().range([height, 0]);

    var tickLabels = ["1 mo", "2 mo", "3 mo"]

    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})

    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)

我正在学习一些教程，下一部分是这样的：

var valueline = d3.svg.line()
        .x(function(d) {return x(d.date); })
        .y(function(d) {return y(d.close); });

我显然没有 date 或 close。我只是不知道如何将线生成器应用于我的数据。那么你能帮我用正确的刻度标签、1 mo 等来完成图表吗？这将非常有帮助。

编辑 ::: 我会告诉你我现在有什么

看来我需要适当缩放 x 值以匹配轴

  var results = {
         "month1" : {"good" : 400,"bad" : 30} ,
         "month2" : {"good" : 200, "bad" : 100},
         "month3" : {"good" : 100, "bad" : 200}

     };

  var arr = []

  for(var key in results){
   var obj = results[key];
   arr.push(obj.good - obj.bad)
  }
  console.log(arr)

  var margin = {top : 30, right : 20, bottom : 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

  var x = d3.scale.linear().range([0, width])
  var y = d3.scale.linear().range([height, 0]);

  var tickLabels = ["1 mo", "2 mo", "3 mo"]

  var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function(d, i) { return tickLabels[i]})

  var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5)

  var valueline = d3.svg.line()
   .x(function(d, i) {return x(i)})
   .y(function(d) {return y(d)})

  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 + ")")

   y.domain([d3.min(arr, function(d) {return d} ), d3.max(arr, function(d) {return d} )])

   svg.append("g").attr("class", "y axis").call(yAxis)

   svg.append("g").attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")

  svg.append("path").attr("d", valueline(arr)).style({"fill" : "none", "stroke" : "blue"})

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

Answer 1

你的x轴显示的是月份，所以你可以参考Array arr的索引。您的 y 轴显示值（好-坏），因此它成为该索引处的值。所以如果 Array arr 是你的数据集，你的价值线应该是：

var valueline = d3.svg.line()
    .x(function(d,i) {return x(i); })
    .y(function(d) {return y(d); });

在您的代码中的 domain/range/tick on axis 上添加了此内容和更多更改：DEMO

需要帮助从数组制作折线图，我想要自定义刻度标签

Need help making a line graph from an array and I would like custom tick labels

javascript

graph

linechart

d3.js