我一直在努力在v4上构建Bostock's chained transitions示例的变体一段时间了。我没有错误,但我无法正确渲染区域块。
我相信我可能没有正确引用数据。对于调用区域或d [city],我的语法可能不正确?我知道在版本4中有所改变。
我也正在将数据读入一个名为area的变量而不是line,因为我希望它是一个面积图。
以下是基本代码:
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var city = "New York",
parseDate = d3.timeParse('%Y%m%d');
var xScale = d3.scaleTime()
.range([0, width]);
var yScale = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
var area = d3.area()
.x(d => xScale(d.date))
.y0(yScale(yScale.domain()[0]))
.y1(d => yScale(d.city))
.curve(d3.curveCatmullRom.alpha(0.5));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data2.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
d["New York"] = +d["New York"];
d["San Francisco"] = +d["San Francisco"];
});
xScale.domain([data[0].date, data[data.length - 1].date]);
yScale.domain(d3.extent(data, function(d) { return d[city]; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
/*svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);*/
svg
.selectAll('.area')
.data(data)
.enter()
.append('path')
.attr('class', 'area')
.attr('d', area);
/*.style('stroke', (d, i) => ['#FF9900', '#3369E8'][i])
.style('stroke-width', 2)
.style('fill', (d, i) => ['#FF9900', '#3369E8'][i])
.style('fill-opacity', 0.5);*/
svg.append("text")
.datum(data[data.length - 1])
.attr("class", "label")
.attr("transform", transform)
.attr("x", 3)
.attr("dy", ".35em")
.text(city);
d3.selectAll("input").on("change", change);
/*var timeout = setTimeout(function() {
d3.select("input[value=\"San Francisco\"]").property("checked", true).each(change);
}, 2000);*/
function change() {
//clearTimeout(timeout);
city = this.value;
// First transition the line & label to the new city.
var t0 = svg.transition().duration(750);
t0.selectAll(".area").attr("d", area);
t0.selectAll(".label").attr("transform", transform).text(city);
/*Then transition the y-axis.
y.domain(d3.extent(data, function(d) { return d[city]; }));
var t1 = t0.transition();
t1.selectAll(".line").attr("d", line);
t1.selectAll(".label").attr("transform", transform);
t1.selectAll(".y.axis").call(yAxis);*/
}
function transform(d) {
return "translate(" + xScale(d.date) + "," + yScale(d[city]) + ")";
}
});
And a jsfiddle(虽然我不确定是否正确读取了tsv文件)。
希望有人可以发现问题,因为它对我来说很好但没有显示任何内容。
答案 0 :(得分:1)
代码中的主要问题:
var area = d3.area()
.x(d => xScale(d.date))
.y0(yScale(yScale.domain()[0]))//incorrect as the extent is not defined
.y1(d => yScale(d.city))
.curve(d3.curveCatmullRom.alpha(0.5));
取而代之的是:
var area = d3.area()
.x(d => xScale(d.date))
.y1((d) => yScale(d[city]))
.curve(d3.curveCatmullRom.alpha(0.5))
另一个问题
svg
.selectAll('.area')
.data(data) <--- it should be datum since you making a single path
.enter()
.append('path')
.attr('class', 'area')
.attr('d', area);
应该是:
svg
.append('path')
.datum(data)
.attr('class', 'area')
.attr("fill", "steelblue")
.attr('d', area);
稍后设置范围集y0
yScale.domain(d3.extent(data, function(d) { return d[city]; }));
area.y0(yScale(yScale.domain()[0]));
过渡中的其他微不足道的修复。
工作代码here