Question

我正在学习制作d3图表的基本教程。该教程非常简单，因此我能够跟进并获得正确显示的教程图。我尝试添加第二个图表，指向相同数据的副本，但我根本无法弄清楚如何显示第二个图表。

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>

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);
});

谢谢！

Answer 1

你在改变第二张图表的所有变量方面做得很好。但是你做得很好，你最终改变了你不应该改变的东西。因此，第二个图表中的这个块：

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

应该是：

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

在同一页面上出现多个d3图表

1 个答案: