gpt4 book ai didi

d3.js - D3 的简单多折线图

转载 作者:行者123 更新时间:2023-12-02 08:38:23 25 4
gpt4 key购买 nike

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-more-than-one-line-to-graph-in.html)。

  1. 我的代码有什么问题?
  2. 如何添加其他系列(R71、D78)?
  3. 是否有具有完整代码并逐步完成所有步骤的优秀教程?

最佳答案

您的第一个点位于 (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.js - D3 的简单多折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18969863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com