图表但使用d3js时没有数据库

Question

昨天我使用d3.js在一个页面中创建了两个图表。问题是 - 页面只显示一个图表的一个数据库，另一个图表没有任何数据库，但它显示了x轴和y轴。

有谁知道为什么会发生这种情况以及如何解决这个问题？ 非常感谢。

这里给出了我的代码：

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var formatDate = d3.time.format("%H-%M-%S");

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxi = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxi = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.date1); })
    .y(function(d) { return y(d.close1); });

var svg = d3.select("#e1").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("01.tsv", type, function(error, data1) {
  if (error) throw error;

  x.domain(d3.extent(data1, function(d) { return d.date1; }));
  y.domain(d3.extent(data1, function(d) { return d.close1; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxi);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxi)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  svg.append("path")
      .datum(data1)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.date1 = formatDate.parse(d.date1);
  d.close1 = +d.close1;
  return d;
}




var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");

var svg1 = d3.select("#e2").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("02.tsv", type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  svg1.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg1.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("Frequency");

  svg1.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });
});

function type(d) {
  d.frequency = +d.frequency;
  return d;
}

这里给出了我的01.tsv文件：

date1 close1 06-30-00 93.24 06-31-00 95.35 06-32-00 98.84 06-33-00 99.92 06-34-00 99.80 06-35-00 99.47 06-36-00 100.39 06-37-00 100.40 06-38-00 100.81 06-39-00 103.92 06-40-00 105.06 06-41-00 106.88 06-42-00 107.34 06-43-00 108.74 06-44-00 109.36 06-45-00 107.52 06-46-00 107.34 06-47-00 109.44 06-48-00 110.02 06-49-00 111.98 06-50-00 113.54 06-51-00 112.89 06-52-00 110.69 06-53-00 113.62

这是我的02.tsv文件：

字母频率 A .08167 B .01492 C .02782 D .04253 E .12702

Answer 1

问题在于重复变量/函数名称。我附上了一份工作副本。

var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var formatDate = d3.time.format("%H-%M-%S");

var x1 = d3.time.scale()
 .range([0, width]);

var y1 = d3.scale.linear()
.range([height, 0]);

var xAxi1 = d3.svg.axis()
.scale(x1)
.orient("bottom");

var yAxi1 = d3.svg.axis()
.scale(y1)
.orient("left");

var line = d3.svg.line()
.x(function(d) { 
    return x1(d.date1); })
.y(function(d) { 
    //console.log(y1(d.close1));
    return y1(d.close1); });

var svg = d3.select("#e1").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("01.tsv", type1, function(error, data1) {
if (error) throw error; 
 x1.domain(d3.extent(data1, function(d) { return d.date1; }));
 y1.domain(d3.extent(data1, function(d) { return d.close1; }));

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxi1);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxi1)
 .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Price ($)");

 svg.append("path")
  .datum(data1)
  .attr("class", "line")
  .attr("d", line);
 });

function type1(d) {
 d.date1 = formatDate.parse(d.date1);
 d.close1 = +d.close1;
 return d;
}




var margin = {top: 20, right: 20, bottom: 30, left: 40},
  width = 500 - margin.left - margin.right,
 height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
 .range([height, 0]);

var xAxis = d3.svg.axis()
 .scale(x)
 .orient("bottom");

 var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")
 .ticks(10, "%");

var svg1 = d3.select("#e2").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("02.tsv", type, function(error, data) {
 if (error) throw error;
 x.domain(data.map(function(d) { return d.letter; }));
 y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

 svg1.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);

  svg1.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("Frequency");

  svg1.selectAll(".bar")
   .data(data)
 .enter().append("rect")
   .attr("class", "bar")
   .attr("x", function(d) { return x(d.letter); })
   .attr("width", x.rangeBand())
   .attr("y", function(d) { return y(d.frequency); })
   .attr("height", function(d) { return height - y(d.frequency); });
  });

 function type(d) {
  d.frequency = +d.frequency;
  return d;
  }

希望这有帮助。