我正在构建一个页面，允许用户根据用户按下按钮选择数据集来生成多个d3图表。第一张图表很好。生成第二个图表，但线条从图表开始到左侧。每个附加图表都有同样的问题。有没有人有类似的问题？我没有发布特定的代码行，因为我不确定问题出在哪里？我希望其他人遇到类似的问题。
这是代码运行的示例。单击部门按钮以开始显示其他图表以查看问题。 http://www.justingosses.com/cookCounty/Index.html
代码本身可以在github上找到。 https://github.com/JustinGOSSES/JustinGOSSES.github.io
任何帮助将不胜感激。我还没能找到以前类似的问题。
答案 0 :(得分：0)
第一张图表生成正常。生成第二个图表，但线条从图表开始到左侧。每个附加图表都有同样的问题。
这里没有更详细的说法很难说，但我会说要查看生成附加图表的代码。你忘了重新初始化某些东西吗？是否有一个全局变量（在初始化第一个图表时设置）可能会搞砸了？您是否正确设置了x域和范围？
答案 1 :(得分：0)
感谢adilapapaya。你的建议我没有重新初始化是完全正确的。单击按钮创建新图表时，新数据阵列将添加到旧数组中而不替换它。我忘记了一个var FinalArray = []行来重置数组为空，需要进入函数内部，该函数将数据提供给创建每个新D3图表的函数。
我错过了这一行：var ArrayFinal = []
显然，如果使用相同的功能创建多个折线图，并且每次只是将数据添加到数据数组的末尾，D3就足够聪明，只能使用轴的新数据，但不够聪明，只能使用新的这些线的数据？
以下是有问题的功能。我添加了第2行。此函数的目的是在其他地方处理json数据集并返回格式化的数组，该数组是原始json的子集。部门名称和数据数组将发送到创建D3图表的函数。
function findFunds(row, department) {
var ArrayFinal = [] //<-- this is the line I missed
var dates = ["1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015"];
var date = [];
//concats key and value names in data_json into array values good for display in D3.js
for (each in dates) {
date.push(dates[each].concat("0101"));
};
console.log(date)
var appropriations = [];
for (each in dates) {
appropriations.push("Appropriations ".concat(dates[each]))
};
console.log(appropriations)
var expenditures = [];
for (each in dates) {
expenditures.push("Expenditures ".concat(dates[each]))
};
console.log(expenditures)
//creates an object with three keys/value pares, repeats over a loop
for (each in dates) {
var obj = {};
obj.date = date[each];
obj.appropriations = data_json[row][appropriations[each]];
obj.expenditures = data_json[row][expenditures[each]];
//throws the object created into an array
ArrayFinal.push(obj);
};
console.log(ArrayFinal);
d3_mini(department, ArrayFinal);
};
作为参考，这是创建我的D3折线图的功能。
//D3 for second smaller funds vs. time by department starts here!
function d3_mini(department, ArrayFinal) {
//////var data = ArrayFinal;
var margin = {top: 20, right: 50, bottom: 30, left: 80},
width = 600 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.interpolate("step-after")
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.temperature); });
var line = d3.svg.line()
.interpolate("step-after")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
var svg = d3.select("#miniTimeChart").append("div").append("svg")
.data(ArrayFinal)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(20)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
// input prepared JSON of only data necessary for chart in appropriate format
//d3.json(ArrayFinal, function(error, data)
var data = ArrayFinal;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(String(d.date));
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
var money_temp = +d[name]/1000000
return {date: d.date, temperature: money_temp};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.attr("y", 6)
.attr("dy", "0.71em")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Millions of Dollars");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); });
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.style("font-size","12px");
svg.append("text")
.attr("x", (width / 2))
.attr("y", 6 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text(department);
};