Question

我知道之前已经问过这个，但是我无法用这些例子来弄清楚我做错了什么。

我想创建一个简单的6点，3系列图表，其数据看起来像：

data = [
  {"key":"D78","date":"2013-09-23T17:26:21.258Z","value":1.25}, 
  {"key":"D78","date":"2013-09-23T17:28:21.258Z","value":2.25},
  {"key":"R71","date":"2013-09-23T17:26:21.258Z","value":2.45},
  {"key":"R71","date":"2013-09-23T17:28:21.258Z","value":2.85},
  {"key":"X44","date":"2013-09-23T17:26:21.258Z","value":3.87},
  {"key":"X44","date":"2013-09-23T17:28:21.258Z","value":3.87}
]

没有什么令人兴奋的。我理想的做法是从这些数据中制作一个3系列折线图。

svg = d3.select(selector).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).append("g")

x = d3.time.scale().range([ 0, width ])
y = d3.scale.linear().range([ height, 0 ])
format = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ")

valueLine = d3.svg.line().interpolate("basis")
  .x((d) ->
    console.log format.parse(d.date)
    x(format.parse(d.date))
  )
  .y((d) ->
    console.log d.value
    y d.value
  )

  svg.append("path").attr("class", "line")
    .attr "d", valueLine(u.where(data, key: "X44"))

生成SVG：<path class="line" d="M137998238125800,-287L137998250125800,-287"></path>

这段代码只是使用lodash推出了其中一个系列。问题是：屏幕上没有任何内容。它贯穿并抓住了价值，但没有线条。我发现现有的例子既复杂又没有得到很好的解释（http://bl.ocks.org/mbostock/3884955）或缺少关键部分（http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html）。

我的代码出了什么问题？
如何添加其他系列（R71，D78）？
有没有一个很好的教程，有完整的代码，并完成所有步骤？

Answer 1

您的第一个点是（137998238125800，-287）像素坐标，它远离可见屏幕区域。您不使用位于D3核心的selectAll / enter模式。所以你应该从这个基本的tutorial开始，然后你提到的代码示例可能会更有意义：

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); });

带D3的简单多线图

1 个答案: