我试图建立一个简单的折线图,但偶然发现了一些问题。

我正在加载的数据是一个.tsv文件,看起来像这样:

date    frequency
Q1 '07  1000
Q2 '07  900
Q3 '07  700
Q4 '07  500
Q1 '08  450
Q2 '08  430
Q3 '08  400

我正在尝试绘制这样的图表:

d3.tsv("./javascripts/data3.tsv", type, function(error, data) {
  svg.selectAll(".line")
     .data(data)
     .enter().append("path")
     .attr("class", "line")
     .attr("d", d3.svg.area());
});

但是不要像这样添加一行:

<path class="line" d="M0,..." style="stroke: rgb(31, 119, 180);"></path>

我得到多行没有路径:

<g transform="translate(40,20)">
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
<path class="line"></path>
...

我究竟做错了什么?

===============>>#1 票数:1 已采纳

使用datum(mydata)代替data(mydata)会将数据绑定到单个SVG对象,而不是每个值绑定一个。

使用上面建议的示例,这是一个使用您的数据的小提琴: http : //jsfiddle.net/henbox/2DQQc/3/

我还修改为使用d3.svg.area路径生成器,而不是d3.svg.line (假设您出于某种原因选择了它):

您的数据还使用四分之一数字(Q1,Q2 ...),将其解析为日期会有些棘手。 我刚刚用月份名称替换了Q号,但是如果您需要正确执行操作,请参见https://gist.github.com/biovisualize/5430237/

  ask by Spearfisher translate from so

未解决问题?本站智能推荐:

1回复

简单的折线图连接直方图的顶部

在以下示例中,我将直方图映射到字母与频率之间。 现在,我希望折线图也用于相同的数据,而无需进行太多更改。 这意味着只有一条红线连接直方图的顶部。 有人可以帮我吗? 直方图:
1回复

AngularJS数组的简单折线图

我有一个带有ng-repeat表格的网页。 现在我想在折线图中显示数组中的价格(= {{amount}} )。 码: 经过一些研究,我发现了一些例子: D3js ChartJS Highcharts 但我似乎无法找到一个简单折线图的教程或示例。
2回复

D3 - 将网格添加到简单折线图

在下面的简单折线图中,我想将网格添加到x和y轴。 有人可以帮助我吗? 片段: 结果: 请帮我找到如何在x和y轴上向图表添加网格。
1回复

D3 V4-尝试绘制简单的折线图

我正在努力在D3(V4)中绘制简单的折线图... 我的数据如下所示,我相信它很好,因为我可以使用d3.timeParse()来解析日期,并且它们console.log很好: 资料格式 例如:日期,名称,值-可能是:2017-03-22 12:20:02,名称,-0.2
1回复

如何显示不连续折线图

我需要一个JavaScript库,在这里我可以很容易地以折线图的形式显示二维数据。 我需要显示不连续的线。 我看过一些库,但是它们做的比我想要的要多得多。 我尝试过人力车,但它只接受一系列。 假设我有以下数据: ]; 在这里,我希望round_1_2基本上从第二个刻度开
2回复

在折线图上绘制矩形

我有一个简单的折线图。 我想让用户在图的顶部绘制与网格线对齐的矩形。 请参见此处的直观示例: 我看过Highcharts和d3,但都没有一种工具可以让用户在图形上方进行“绘制”。 在深入研究API和/或用大量代码重新发明轮子之前,我希望有人在之前已经做到这一点(或类似的
1回复

D3-单折线图和多折线图工具提示

我是D3的新手,只是将以下工具提示合并到了我的应用程序中。 我既有单个折线图,也有多个折线图。 单行: https : //bl.ocks.org/alandunning/cfb7dcd7951826b9eacd54f0647f48d3 多折线: 具有鼠标悬停工具提示的多系列折线图
1回复

有没有简单的方法可以将此D3多折线图转换为面积图?

我对D3相当陌生,我试图制作一个没有成功的堆积面积图(外观与此相似: http : //nvd3.org/examples/stackedArea.html )。 到目前为止,我有一个堆积的多折线图,所以我希望有一种简单的方法可以将颜色填充到图形的底部,但是当我尝试进行填充时,它会为颜色着
1回复

仅当折线图具有相关注释时才在折线图中添加圆

我在每个数据点上都用圆圈创建了这个漂亮的线图: jsfiddle 我的问题是圆圈,只有在数据点上有“注释”时才让它们显示。 在上面的代码中,我将“注释”作为标签附加在圆上,但是我只想在该数据点的圆上显示是否有注释。 我想这样做是因为当图表上的圆圈过多时,它变得很拥挤且难以阅读。
1回复

向折线图添加新的数据点条目

我正在尝试向图表(data2 var)添加新的数据点,但是没有附加到该线,而是创建了一条新线。 http://jsfiddle.net/30c8xf9s/有什么想法吗?