2

http://jsfiddle.net/ytvka/4/

我知道以前有人问过这个问题，但我无法使用这些示例来找出我做错了什么。

我想创建一个简单的 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-多于一条线到图形 in.html）。

  1. 我的代码有什么问题？
  2. 如何添加其他系列（R71、D78）？
  3. 是否有一个很好的教程，其中包含完整的代码并完成所有步骤？
4

1 回答 1

6

您的第一点位于 (137998238125800,-287) 像素坐标处，它远离可见屏幕区域。您不使用 D3 核心的 selectAll/enter 模式。所以你应该从这个基础教程开始，那么你提到的代码示例可能会更有意义：

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); });
于 2013-09-24T02:01:23.943 回答