文章/答案/技术大牛

发布

问新手d3叠加面积图
EN

Stack Overflow用户

提问于 2014-01-07 14:02:49

回答 1查看 874关注 0票数 2

对于一个可能很简单的问题，我非常抱歉，我看了这里的示例页面：http://bl.ocks.org/mbostock/3885211#，然后我修改了行：

d3.tsv("data.tsv", function(error, data) {

成为

d3.csv("data.csv", function(error, data) {

指向包含以下内容的数据文件：

date,Kermit,piggy,Gonzo,fuzzy,hogthrob,animal,floyd,Gabriel,Beaker,scooter,statler,waldorf,slim,sam
13-Oct-31,113.44,435.15,19.57,60.55,53.02,268.28,87.34,1.98,0,31.68,0,21.59,4.82,11.31
13-Nov-30,109.86,506.85,18.97,58.77,388.37,131.48,85.34,1.98,0,48.50,0,21.59,4.70,11.31
13-Dec-31,113.46,644.88,19.57,60.57,669.47,0,87.46,1.98,0,80.97,0,21.59,4.82,11.43

在刷新浏览器时，x轴和日期看起来是正确的，但是只有一个数据点(用于Kermit)被绘制成图表上唯一的条。

有人能给我指明正确的方向吗。作为一个完整的d3新手，任何协助都将不胜感激。

javascript

csv

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-07 17:42:28

问题是，堆叠面积图中的数据中的每一行合计为100。但是，您的数据在每一行中的总和为不同的值，对于每个日期，'Kermit'的值为>100。因此，当D3为您的数据集绘制所有路径时，它们并不在图的范围内。

要解决这个问题，您需要初始化y轴的domain，这样它就不会期望您的值默认在[1, 100]的范围内。初始化x轴域后，可以添加以下内容：

// Find the value of the day with highest total value
var maxDateVal = d3.max(data, function(d){
  var vals = d3.keys(d).map(function(key){ return key !== "date" ? d[key] : 0 });
  return d3.sum(vals);
});

// Set domains for axes
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, maxDateVal])

您需要做的唯一其他更改是通过进行此更改来停止数据的规范化。

return {date: d.date, y: d[name] * 1}; /// 100};

并注释掉将y轴上的文本格式化为百分比的行：

var parseDate = d3.time.format("%y-%b-%d").parse;
    //formatPercent = d3.format(".0%");
.
.
.
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    //.tickFormat(formatPercent);

请参阅bl.ock上的完整示例。

进行这些更改后，我得到了以下图表：

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20973599

复制

相似问题

问新手d3叠加面积图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问新手d3叠加面积图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问新手d3叠加面积图
EN