D3堆叠面积图tsv到csv的转换问题 [英] D3 stacked area chart tsv to csv conversion problems
问题描述
我正在尝试将此示例从tsv转换为csv.
I am trying to convert this example from tsv to csv.
当前,这就是我所拥有的: https://jsfiddle.net/asb1926/sc5wdkLe/
Currently this is what I have: https://jsfiddle.net/asb1926/sc5wdkLe/
我一直得到的错误是这个(在jsfiddle上是第46行):
The error I keep getting is this (on the jsfiddle it is line 46):
d3.v4.min.js:7 Uncaught TypeError: Cannot read property 'length' of undefined
at t (d3.v4.min.js:7)
at SVGPathElement.<anonymous> (line:61)
at SVGPathElement.<anonymous> (d3.v4.min.js:2)
at _t._l [as each] (d3.v4.min.js:4)
at _t.yl [as attr] (d3.v4.min.js:4)
at line:59
at Object.<anonymous> (d3.v4.min.js:7)
at _.call (d3.v4.min.js:4)
at XMLHttpRequest.e (d3.v4.min.js:7)
我当前正在使用的csv文件是这样的:
The csv file I am currently using is this:
date,Detractors,Promoters,Passives
04/23/12,37,12,46
04/24/12,32,19,42
04/25/12,45,16,44
04/26/12,24,52,64
推荐答案
您的日期字符串具有不同的格式.这是博斯托克的约会:
Your date strings have a different format. This is Bostock's dates:
"2015 Jun 15"
这是你的:
"04/23/12"
因此,您需要一个不同的解析器:
Therefore, you need a different parser:
var parseDate = d3.timeParse("%m/%d/%Y");
此外,您的路径d
属性是错误的.应该很简单:
Besides that, your path d
attribute is wrong. It should be simply:
.attr("d", area);
这是您所做的更改的代码:
Here is your code with that changes:
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom;
var parseDate = d3.timeParse("%m/%d/%Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var stack = d3.stack();
var area = d3.area()
.x(function(d, i) {
return x(d.data.date);
})
.y0(function(d) {
return y(d[0]);
})
.y1(function(d) {
return y(d[1]);
});
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = d3.csvParse(d3.select("#csv").text(), type)
var keys = data.columns.slice(1);
x.domain(d3.extent(data, function(d) {
return d.date;
}));
z.domain(keys);
stack.keys(keys);
var layer = g.selectAll(".layer")
.data(stack(data))
.enter().append("g")
.attr("class", "layer");
layer.append("path")
.attr("class", "area")
.style("fill", function(d) {
return z(d.key);
})
.attr("d", area);
layer.filter(function(d) {
return d[d.length - 1][1] - d[d.length - 1][0] > 0.01;
})
.append("text")
.attr("x", width - 6)
.attr("y", function(d) {
return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2);
})
.attr("dy", ".35em")
.style("font", "10px sans-serif")
.style("text-anchor", "end")
.text(function(d) {
return d.key;
});
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"));
function type(d, i, columns) {
d.date = parseDate(d.date);
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100;
return d;
}
pre {
display: none;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="300"></svg>
<pre id="csv">date,Detractors,Promoters,Passives
04/23/12,37,12,46
04/24/12,32,19,42
04/25/12,45,16,44
04/26/12,24,52,64</pre>
PS:我正在使用<pre>
元素来存储CSV,因为我不能在堆栈代码段中使用真实的CSV.
PS: I'm using a <pre>
element to store the CSV, because I cannot use a real CSV in the Stack snippet.
这篇关于D3堆叠面积图tsv到csv的转换问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!