同一页上的多个d3图形出现问题

Question

I'm following a basic tutorial for making d3 graphs. 我正在学习制作d3图的基本教程。 The tutorial is fairly straightforward so I was able to follow along and get the tutorial graph to display correctly. 该教程非常简单，因此我可以继续学习并获得正确显示的教程图。 I tried adding a second graph, pointing at a copy of the same data but I simply can't figure out how to get the second graph to display. 我尝试添加第二张图，指向相同数据的副本，但是我根本无法弄清楚如何显示第二张图。

The html is as follows: html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Strategy Dashboard</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body class="container">
    <h1 class="navbar" id="title">Dashboard</h1>
        <p>In this tutorial we will walk through two examples of how to use D3.js. Enjoy.</p>
        <p>   These tutorials are based off of <a href="https://square.github.io/intro-to-d3/examples/">Intro to D3.JS</a> and <a href="http://bl.ocks.org/mbostock/3883245">Line Chart</a>.</p><br>


    <h2>Revenue</h2><br>
    <h3>So many dollars!</h3><br>
    <div class="linechart"></div>

    <div class="linechartib"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="js/app.js"></script>

</body>
</html>

The js is as follows: js如下：

'use strict';
//Dashboard
//setup size of line chart
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

//parse data from file
var parseDate = d3.time.format("%b").parse;

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

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

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

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

//construct the line using points from data
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.dollars); });

var svg = d3.select(".linechart").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("data.tsv", function(error, data) {
  if (error) throw error;

//traverse through the data 
  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.dollars = +d.dollars;
  });
//establish the domain for x and y axes
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.dollars; }));

//add "groups" 
  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("RevPOH (dollars)");

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

//Percent IB
/////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////

var marginib = {top: 20, right: 20, bottom: 30, left: 50},
    widthib = 600 - marginib.left - marginib.right,
    heightib = 400 - marginib.top - marginib.bottom;


//set scales

var xib = d3.time.scale()
    .range([0, widthib]);

var yib = d3.scale.linear()
    .range([heightib, 0]);



//create axes
var xAxisib = d3.svg.axis()
    .scale(xib)
    .orient("bottom");

var yAxisib = d3.svg.axis()
    .scale(yib)
    .orient("left");

//construct the line using points from data
var lineib = d3.svg.line()
    .xib(function(d) { return xib(d.date); })
    .yib(function(d) { return yib(d.homes); });

var svgib = d3.select(".linechartib").append("svg")
    .attr("width", widthib + marginib.left + marginib.right)
    .attr("height", heightib + marginib.top + marginib.bottom)
  .append("g")
    .attr("transform", "translate(" + marginib.left + "," + marginib.top + ")");

d3.tsv("dataib.tsv", function(error, dataib) {
  if (error) throw error;

//traverse through the data 
  dataib.forEach(function(d) {
    dib.date = parseDate(d.date);
    dib.homes = +d.homes;
  });
//establish the domain for x and y axes
  xib.domain(d3.extent(dataib, function(d) { return d.date; }));
  yib.domain(d3.extent(dataib, function(d) { return d.homes; }));

//add "groups" 
  svgib.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightib + ")")
      .call(xAxisib);

  svgib.append("g")
      .attr("class", "y axis")
      .call(yAxisib)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Homes (percent)");

  svgib.append("path")
      .datum(dataib)
      .attr("class", "line")
      .attr("d", lineib);
});

Thank you! 谢谢！

Answer 1

You did very well in changing all the variables for the second chart. 您在更改第二张图表的所有变量方面做得非常好。 But you did so well that you ended up changing what you shouldn't change. 但是您做得很好，以至于最终改变了不应更改的内容。 Thus, this block in the second chart: 因此，第二个图表中的该块：

var lineib = d3.svg.line()
    .xib(function(d) { return xib(d.date); })
    .yib(function(d) { return yib(d.homes); });

Should be: 应该：

var lineib = d3.svg.line()
    .x(function(d) { return xib(d.date); })
    .y(function(d) { return yib(d.homes); });

同一页上的多个d3图形出现问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-25 06:21:25

同一页上的多个d3图形出现问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-25 06:21:25

解决方案1
0 已采纳 2016-07-25 06:21:25