当我附加多个线图div时，D3线从图表向左偏离

Question

我正在构建一个页面，允许用户根据用户按下按钮来选择数据集来生成多个d3图表。第一个图表生成良好。将生成第二个图表，但线条从图表左侧开始。每个额外的图表都有同样的问题。有没有人遇到过类似的问题？我没有发布特定的代码行，因为我不确定问题出在哪里？我希望其他人也遇到类似的问题。

这是代码运行的示例。单击部门按钮开始显示其他图表以查看问题。http://www.justingosses.com/cookCounty/Index.html

代码本身可以在github上找到。https://github.com/JustinGOSSES/JustinGOSSES.github.io

任何帮助将不胜感激。我无法找到以前的类似问题。

Answer 1

谢谢阿迪拉帕亚你说我没有重新初始化是完全正确的。单击按钮以创建新图表时，新数据数组将添加到旧数组中，而不是替换它。我忘记了一个var FinalArray = []行，用于将数组重置为空，该行需要进入向制作每个新D3图表的函数提供数据的函数内部。

我错过了这一行:< code>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);
  };

Answer 2

第一个图表生成罚款。第二个图表生成，但线条从图表的左侧开始。每个附加图表都有同样的问题。

没有更多的细节很难说，但我会说，看看代码，生成额外的图表。你是不是忘了重新初始化什么了？有没有一个全局变量(在初始化第一个图表时设置的)可能会把事情弄糟？您是否正确设置了< code>x域和范围？